H5鼠标拖动事件（drag）

一、元素拖动

HTML5已经完全支持鼠标拖动元素，其中图片和链接默认就支持拖拽，而其他的元素需要设置属性draggable=“true” 就可支持拖拽。其中在拖拽的过程中会默认触发一系列事件。

二、相关事件

1.拖拽元素

被拖拽的元素自身

<div
  id="box"
  draggable="true"
  style="width: 100px;height: 100px;background: greenyellow" 
  ondragstart="dragStart(event)" 
  ondrag="drag(event)" 
  ondragend="dragEnd(event)"
  ></div>

  // 拖拽开始
  function dragStart(e) {
    console.log('dragStart：', e.target);
  }
  // 拖拽中
  function drag(e) {
    console.log('drag：', e.target);
  }
  // 拖拽结束
  function dragEnd(e) {
    console.log('dragEnd：', e.target);
  }

（1）dargstart

在draggable元素上按下鼠标, 开始移动时, 触发一次. (在firefox上需拖动几个像素后才触发此事件)。
event.traget 是draggable元素本身。

（2）drag

拖动draggable元素过程中时, 移动一像素就触发一次。
event.traget 是draggable元素本身。

（3）dragend

释放draggable元素时触发一次.
event.traget 是draggable元素本身；

2.目标元素

拖拽到或者拖拽过程中经过的元素

（1）drop

释放draggable元素时触发一次, event.traget 是鼠标释放时指向的任何元素, 除了body。
注：想要触发drop必须阻止dropover的默认默认行为

<div
  id="box"
  draggable="true"
  style="width: 100px;height: 100px;background: greenyellow"
  ondrop="boxDrop(event)"
></div>
<div
  style="width: 500px;height: 500px;background: #e68900;"
  ondragover="dragOver(event)"
  ondrop="boxDrop(event)"
></div>

function boxDrop(e) {
  console.log('drop', e.target);
}
function dragOver(e) {
  console.log('dragOver', e.target);
  e.preventDefault()
}

（2）dragover

dragover 拖动时在某元素上移动。event.traget 是目标元素。移动1px触发一次
代码同上

（3）dragenter

拖动时进入某元素范围，触发一次, event.traget 是目标元素。

<div
  id="box"
  draggable="true"
  style="width: 100px;height: 100px;background: greenyellow"
  ondrop="boxDrop(event)"
></div>
<div
  style="width: 500px;height: 500px;background: #e68900;"
  ondragenter="dragEnter(event)"
  ondragleave="dragLeave(event)"
></div>

  function dragEnter(e) {
    console.log('dragEnter', e.target);
  }
  function dragLeave(e) {
    console.log('dragLeave', e.target);
  }

（3）dragleave

拖动时离开某元素范围，触发一次, event.traget 是目标元素。
代码同上