js 实现拖拽元素

因为需要计算元素的位置变化，所以需要掌握几个关于位置的api

点击需要拖动元素时，获取该元素的初始位置。

鼠标移动期间 获取元素当前的位置信息

计算

进行事件监听

拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段；

问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止，

解决方法： 将mousemove事件挂在docment，而不是对应的element，此时鼠标滑动只要不出docment范围就不会触发上述情况。

拖动事件完成的动作时是：mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除） 但是mouseup的时候 同时会触发 点击事件（如果元素上面有点击事件的话）

处理办法：记录mousedown(记录开始时间) →mousemove→mouseup（记录结束时间） 的时间 根据时间长短判断是进行了点击事件还是进行了拖拽事件。

正常需求的话 就希望拖拽元素只在屏幕的可视范围内进行拖拽，不能跑出去。

在onmousemove 中添加边缘控制就好，具体范围可以根据具体需求更改。

在拖放的过程中会触发以下事件：

在拖动目标上触发事件 (源元素)

ondragstart - 用户开始拖动元素时触发

ondrag - 元素正在拖动时触发

ondragend - 用户完成元素拖动后触发

释放目标时触发的事件

ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

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

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

ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

event对象（以e代替）

e.target

W3Cschool上的解释是：返回触发此事件的元素（事件的目标节点），这个target属性只兼容ie9及以上

e.preventDefault()

取消事件的默认动作。

e.dataTransfer.setData()

设置被拖数据的数据类型和值。

e.dataTransfer.getData()

获得被拖的数据。

需要有一个可拖拽的div元素。

1、该div元素应设置draggable=true属性来标识该元素可拖拽。

2、为该div元素添加一个v-on：dragstart监听事件，该事件函数接收一个event参数。

3、其中包含所拖动的div元素和其他数据，该事件函数可以用来获取拖拽的元素的信息，并将其存入dataTransfer对象中，以便在放置时提取这些数据。

4、为要放置的元素添加一个v-on：drop监听事件，该事件函数会接收一个event参数，在该事件中，可使用dataTransfer.getData()方法取出之前传入的数据。

5、将该数据写入下拉框中即可完成拖拽到下拉框的功能。

---