原生拖拽,拖放事件(drag and drop)

Posted 2023-03-17

参考技术A

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

一个完整的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获取文件信息进行操作.

PYQT5 (十八)文件拖放（drag and drop）并获取文件信息

参考技术A 通过重写QScrollArea 类实现的文件拖拽操作
同样适用于QTreeWidget
要复制全,下面的三个类都必须重写