H5拖拽文件常忘记的点

eg:

监听标签的时候 dragover需要阻止默认 
 元素.addEventListener("dragover", (event) => {
        //使可以触发drop事件
        event.preventDefault();
      });
 元素.addEventListener("drop", (event) => {
        //使浏览器兼容问题得以解决,防止在新的标签页打开拖拽进来的文件
        event.preventDefault();
        event.stopPropagation();
          
        let files = event.dataTransfer.files;
        console.log(files);
      });

源对象

dragstart 开始拖拽...

     event.dataTransfer 存信息

      如果是图片 需要存属性

  拿到img标签名 存标签名 和存属性
源:
 dragstart中
let a = event.dataTransfer
      a.setData('tag', 'img')
      a.setData('src', img.src)
 目:
   drop中:
   let a = event.dataTransfer
   let src = a.getData('src')
        let img = document.createElement('img')
        img.src = src
        div.appendChild(img)

drag 拖拽中...

dragoend拖拽结束

目标对象

dragenter 进入

dragover 移动上面

       event.preventDefault()

dragleave 离开

drop 停放的

     event.stopPropagation()

     event.preventDefault()