js 实现拖拽元素

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

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

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

计算

进行事件监听

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

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

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

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

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

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

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

拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从 *** 作系统拖拽文件实现文件选择,拖拽实现元素布局的修改.

一个完整的drag and drop流程通常包含以下几个步骤:

1.设置可拖拽目标.设置属性draggable="true"实现元素的可拖拽.

2.监听dragstart设置拖拽数据

3.为拖拽 *** 作设置反馈图标(可选)

4.设置允许的拖放效果,如copy,move,link

5.设置拖放目标,默认情况下浏览器阻止所有的拖放 *** 作,所以需要监听dragenter或者dragover取消浏览器默认行为使元素可拖

6.监听drop事件执行所需 *** 作

以下是拖拽产生的一系列事件,拖拽事件产生时不会产生对应的鼠标事件.

1.dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从 *** 作系统拖拽文件到浏览器时不触发此事件.

2.dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮

3.dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.

4.dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.

5.drag:拖拽期间在被拖拽元素上连续触发

6.drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需 *** 作.如果是从 *** 作系统拖放文件到浏览器,需要取消浏览器默认行为.

7.dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到 *** 作系统时不会触发此事件.

拖拽事件周期中会初始化一个DataTransfer对象,用于保存拖拽数据和交互信息.以下是它的属性和方法.

1.dropEffect: 拖拽交互类型,通常决定浏览器如何显示鼠标光标并控制拖放 *** 作.常见的取值有copy,move,link和none

2.effectAllowed: 指定允许的交互类型,可以取值:copy,move,link,copyLink,copyMove,limkMove, all, none默认为uninitialized(允许所有 *** 作)

3.files: 包含File对象的FileList对象.从 *** 作系统向浏览器拖放文件时有用.

4.types: 保存DataTransfer对象中设置的所有数据类型.

5.setData(format, data): 以键值对设置数据,format通常为数据格式,如text,text/html

6.getData(format): 获取设置的对应格式数据,format与setData()中一致

7.clearData(format): 清除指定格式的数据

8.setDragImage(imgElement, x, y): 设置自定义图标

dataTransfer对象在传递给监听器的事件对象中可以访问,如下:

在页面中选择文本并拖拽,无需处理dragstart设置数据,浏览器自动设置选取的文本.相当于 event.dataTransfer.setData("text/plain", "this is text to drag") .只需要在拖放目标上读取对应格式的数据即可.

前面介绍了最基本的理论知识,下面进行实际 *** 作

目标: 拖拽元素到达目的区域,改变在DOM中的位置,同时设置反馈视觉效果

从 *** 作系统拖拽文件到浏览器中.不会触发dragstart,dragend,只需取消拖放区域的默认行为,设置反馈,并在拖放发生时取消浏览器默认行为,通过e.dataTransfer.files获取文件信息进行 *** 作.

---