拖放(一):原生drag and drop

拖放流程

用户能够将一个可拖动元素移动到另一个可放置元素中,释放鼠标来应用这些改变。

拖放总的来说有三步: 鼠标按下、移动和释放

image

每一步对应一个关键点

  1. 拖放元素,设置属性draggable="true"使其可拖动
  2. 拖拽移动过程
  3. 拖拽释放区域

拖放事件

拖放过程中会触发多个事件,这些事件会作用于两种对象元素上,一种是被拖动的元素,另外一种是放置目标元素
拖动期间像mousemove等事件均不会被触发。如果由本地向浏览器拖放文件,dragstartdragend也不会被触发。

事件 对象 作用
dragstart src 元素开始被拖动的时候触发
dragenter target 拖动元素鼠标进入到目标区域时触发
dragover target 拖动元素在目标区域移动时触发
dragleave target 拖动元素鼠标离开目标区域时触发
drag src 拖放过程中在被拖动元素上连续触发
drop target 释放时触发,目标元素
dragend src 释放时触发,被拖动元素

在默认的情况下,浏览器会阻止所有的拖放操作,所以在进入到目标区域时需要阻止浏览器的默认行为。也就是在dragenterdragover的事件中取消浏览器默认行为,使元素可以被拖放。

拖放数据

拖放事件初始化后会生成一个dataTransfer对象,其中保存了所有拖放数据。

通过浏览器控制台打印这个对象,可以看到有如下属性和方法:
image
其中

  • effectAllowed:限定可操作类型,取值[copy,move,link,copyLink,copyMove,limkMove,all, none,uninitialized]
  • dropEffect: 设置光标类型,取值是effectAllowed中设置的,但是只有[copy,move,link,none]可被设定
  • files:读取可用的本地文件列表
  • items:保存了DataTransferItemList对象
  • types:保存DataTransfer设置的数据类型

方法

  • setData(format, data) :在dataTransfer 中设置数据,常见类型Drag Types
  • getData(format): 获取设置的对应格式数据
  • clearData(format): 清除指定格式数据
  • setDragImage(image, xOffset, yOffset):设置拖动反馈图片

举个栗子

知道了上面的概念之后,就可以进行实际的操作了。

参考资料

https://developer.mozilla.org/zh-CN/docs/DragDrop/Drag_and_Drop