拖拽事件

原生拖拽事件

  /**
   * @dragstart  拖拽开始（鼠标按下并开始移动时触发，会在拖放的元素上触发事件）
   * @drag 拖拽移动 （在移动的过程中持续触发）
   * @dragend  拖拽结束 （拖拽停止后触发，无论是否拖拽到有效区域）
   * 当拖拽到有效区域，会触发以下事件：
   * @dragenter 进入 （当拖拽元素进入有效区域触发）
   * @dragover 完毕 (当拖拽元素进入有效区域且持续移动，持续触发)
   * @dragleave 离开  (当拖拽元素离开有效区域触发)
   * @drop 终止 (当拖拽元素，放置在有效区域中触发) // 在火狐3.5+中，会默认默认转向图像文件，所以需要阻止默认行为e.preventDefault()
  */
  let span = document.querySelector('span')
  let box = document.querySelector('.box')
  let img = document.querySelector('img')


  /**
   * 设置拖拽元素
   * 系统默认的可拖拽元素外需要设置：span.draggable = true  （或标签上设置即可）
   * @e.dataTransfer.setData(key,value) 设置要发送的数据
   * @e.dataTransfer.getData(key) 获取发送的数据
   * @e.dataTransfer.effectAllowed 和 e.dataTransfer.dropEffect 必须配合使用才生效
   * @effectAllowed 必须放在dragstart 
   * @dropEffect 必须放在drop  
   * 它只是改变了鼠标指针的样式，并没什么卵用，不介意样式的话可以忽略不计，直接执行你想要的结果
  */
  span.draggable = true
  img.addEventListener('dragstart',function(e){
    console.log('拖拽开始')
    e.dataTransfer.effectAllowed = "move"
    console.log(e)
    e.dataTransfer.setData("name",'xiaoji') // 这里写传递的信息
  })
  img.addEventListener('dragstart',function(e){
    console.log('拖拽移动')
  })
  img.addEventListener('dragstart',function(e){
    console.log('拖拽结束')
  })

  /**
   * 设置拖拽有效区域
   * dragover  是必须的  阻止默认行为 e.preventDefault()也是必须的，否则不会触发drop事件
   * 会触发dragleave 事件，最好都加上阻止默认行为，否则有的浏览器，不会触发drop事件
  */
  box.addEventListener('dragenter',function(e){
    console.log('进入有效区域')
  })
  box.addEventListener('dragover',function(e){
    console.log('有效区域移动')
   
    e.preventDefault();
  })
  box.addEventListener('drop',function(e){
    console.log('放置在有效区域')
    e.dataTransfer.dropEffect= "move"
    console.log(e)
    var data = event.dataTransfer.getData("name");
    console.log(this.append(span))
    console.log(data)
  })
  box.addEventListener('dragleave',function(e){
    console.log('放置到有效区域外')
    e.preventDefault();
  })

• e.dataTransfer.effectAllowed 和 e.dataTransfer.dropEffect 属一览
  

案例

let box = document.querySelector('.box')
// 实现一个拖拽上传
function getFiles(e){
  e.preventDefault();
  if(e.type === 'drop'){
    let files = e.dataTransfer.files
    // files.length  是拖拽了几个文件过来
    if(files.length > 1){
      // 表单提交上传文件
      let forms = new FormData()
      // 循环拿到每个文件
      for (const key in files) {
        if (Object.hasOwnProperty.call(files, key)) {
          const item = files[key];
          console.log(item)
          forms.append(`file${key}`,item)
        }
      }
       // 这里写你想做的事
    }
  }
}
box.addEventListener('dragenter',getFiles)
box.addEventListener('dragover',getFiles)
box.addEventListener('drop',getFiles)