html5 drag拖拽

一、概念

1. 被拖拽元素（拖拽目标）

1.1 属性

必须给拖拽目标设置draggable=true，目标才能拖动

1.2 方法

1.2.1
ondragstart - 用户开始拖动元素时触发 - 只触发一次

      handleDragStart(event, code) {
        console.log('拖动开始');
        // 传递数据
        event.dataTransfer.setData('code', code);
      },

1.2.2
ondrag - 元素正在拖动时触发 - 触发多次

      handleDrag(event, code) { 
        console.log(event);
      },

1.2.3
ondragend - 完成目标元素拖动时触发 - 触发一次

      handleDragEnd(event) { 
        console.log('拖动结束');
        let code = event.dataTransfer.getData('code'),
      },

2. 可以放置被拖拽元素的可释放元素（释放目标）

2.1 方法

2.1.1
ondragenter - 当被鼠标拖动的元素进入该元素范围内时触发此事件 - 触发一次

      handleDragEnter(event) { 
        console.log(event);
      },

2.1.2
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 - 触发多次

      handleDragOver(event) { 
        console.log(event);
      },

2.1.3
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 - 触发一次

      handleDragLeave(event) { 
        console.log(event);
      },

2.1.4
ondrop - 在一个该元素中的拖动过程中，释放鼠标键时触发此事件 - 触发一次

      handleDrop(event) { 
        console.log('拖动结束');
        let code = event.dataTransfer.getData('code'),
      },

2.2 注意事项

1.可释放目标必须重写ondragenter和ondragover两个方法并且该元素要使用这两个方法，才能将元素变成可放置东西的元素。不然拖动目标到任何元素都会显示一个圆圈不可释放。
2.ondrop是只有在实现这个方法的元素（容器）里释放鼠标键触发。

3. 拖拽目标和释放目标间传递数据

3.1 dataTransfer对象

dataTransfer对象是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中，可以使用这个对象的属性和方法来 完善拖放功能。

3.2 方法

1. setData('code','hello')
2. getData('code')

3.setDragImage(Element img,long x,long y):自定义拖放元素的鼠标图标

img表示拖放时的 <> 元素的图标，x 表示图标距离鼠标指针的x轴方向的偏移值，y表示图标距离鼠标指针y轴方向的偏移值。

4. ......

二、event事件中各种位置信息

鼠标事件距离分析.png

1.如上图所示，需注意pageY和clientY在页面没有滚动条时是一样的值，但有了滚动条以后，pageY一定是大于或等于 clientY。即pageY受到滚动条的影响。

三、实战

有了以上基础，实现拖拽功能很简单，无非就是设置元素的绝对定位或者在释放的地方添加一个元素，这些教程请自行百度。