核心事件

ondrop事件：可拖动元素或选取的文本放置在目标区域时触发

html
div中添加ondrop事件  
ondrop="dragUpload('img_` + le + `','drag_` + le + `',this, event) 

js
/** 拖拽上传 */  img_id drag_id  为自定义对应元素id值
function dragUpload(img_id,drag_id,that, event) {
   var e = event || window.event;
   e.preventDefault();
   e.stopPropagation();
   const files = e.dataTransfer.files;
   upload(img_id,drag_id,files);
}

? ? ?2.?ondragover?事件：在可拖动元素或选取的文本正在拖动到放置目标时触发

html
div中添加ondragover事件
ondragover="drag(this, event);"

js
/** 防止拖拽图片时打开图片 */
function drag(that, event) {
    var e = event || window.event;
    e.preventDefault()
    e.stopPropagation()
}

? ? 3.?ondragenter?事件：在拖动的元素或选择的文本进入到有效的放置目标时触发

html
div中添加ondragenter事件  
ondragenter="drag(this, event);"

js
/** 防止拖拽图片时打开图片 */
function drag(that, event) {
   var e = event || window.event;
   e.preventDefault()
   e.stopPropagation()
}

upload上传

? ? 1. 注意 ajax提交时的参数设置

contentType: false, //必须  禁止jQuery设置Content-Type请求头
processData: false, //必须  禁止jQuery处理发送的数据

由于这两个参数我没注意看，结果php一直获取不到 $_FILES?在这浪费了好多时间，引以为戒！?

? ? 2.上传upload函数

js
/** 图片上传 */
function upload(img_id,drag_id,files) {
   const IMG_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
   if (Array.prototype.some.call(files, function(file) {return !IMG_TYPES.includes(file.type)})){
       layer.msg("仅支持png,gif,jpg,jpeg图片格式！")
       return;
   }
   if((files[0].size/1024/1024) > 200){
       layer.msg(`单图片最大200MB！`)
       return;
   }
   if (files.length > 1) {
       layer.msg(`最多只能上传1张图片！`)
       return;
   }
   var file = files[0];
   var formData = new FormData();
   formData.append("file", file);

   $.ajax({
       type: 'POST',
       url: 'php后台upload地址',
       data: formData,
       contentType: false, //必须  禁止jQuery设置Content-Type请求头
       processData: false, //必须  禁止jQuery处理发送的数据
       dataType: "json",
       success: function (msg) {
           if(msg.status == 1){
               //后续DOM操作
           }
       }
   })
}

这样就基本上完成了！小垃圾的日常?