HTML5拖拽事件

HTML5拖拽事件

1. h5拖拽和js拖拽

• JS里拖拽三事件：mousedown、mousemove、mouseup
  实现交互性效果，根据鼠标的移动的位置让元素联动

  dv.addEventListener('mousedown', function (e) {
       
      let x = e.clientX - this.offsetLeft
      let y = e.clientY - this.offsetTop
  
      function handleMove(ev) {
       
          dv.style.cssText = `left: ${
         ev.clientX - x}px; top: ${
         
              ev.clientY - y
          }px;`
      }
      function handleUp(ev) {
       
          this.removeEventListener('mousemove', handleMove)
          this.removeEventListener('mouseup', handleUp)
      }
      document.addEventListener('mousemove', handleMove)
  
      document.addEventListener('mouseup', handleUp)
  })
  

• H5拖拽也可以实现，而且更简单，实际例子：百度图片识别、qq邮箱文件提交、百度网盘文件上传，并且能获取到文件的名称、大小、修改事件

  dv.addEventListener('dragstart', function (e) {
       
      let x = e.clientX - this.offsetLeft
      let y = e.clientY - this.offsetTop
  
      this.addEventListener('dragend', function (ev) {
       
          this.style.cssText = `left: ${
         ev.clientX - x}px; top: ${
         
              ev.clientY - y
          }px;`
      })
  })
  

2. 拖拽七事件

• 除图片外的标签元素默认是不可以拖拽的，加上draggable="true"才能被拖拽
• 拖拽七事件
  • dragstart 拖拽开始，拖拽前触发 ,事件只触发一次
  • drag 拖拽中，拖拽前、拖拽结束之间，连续触发
  • dragend 拖拽结束，拖拽结束触发 ,事件只触发一次
  • dragenter 拖拽进入目标触发
  • dragover 在目标元素上，进入目标