HTML的拖拽事件写这一片文章的主要目的是因为项目最近做可视化的过程中，使用了拖拽操作，根据自己使用及查看资料学习写了这

写这一片文章的主要目的是因为项目最近做可视化的过程中，使用了拖拽操作，根据自己使用及查看资料学习写了这篇文章，希望对大家学习或者复习有所帮助。

可拖拽属性draggable

在一个网页中， 存在集中特定的情况会使用默认的拖拽行为

• 选中的文本
• 图片
• 链接

    <img src='./gif.png />
    <a href="https://www.baidu.com">百度一下</a>

    // 可以通过控制draggable来禁止拖拽行为
    <img draggable="false" src='./gif.png />
    <a draggable="false" href="https://www.baidu.com">百度一下</a>

要使其他的HTML元素可拖拽，必须要满足以下三点

1. 将想要拖拽的元素的draggable属性设置为true， 默认设置draggable值为true
2. 为要拖拽的元素添加dragstart事件
3. 在添加的事件中设置要拖拽的数据

拖放事件

拖拽事件区分被拖拽的元素上触发的事件和拖拽放置元素上的事件

事件	绑定事件	描述	事件绑定元素
drag	ondrag	元素被拖拽过程中触发的事件	拖拽元素
dragend	ondragend	拖动操作结束	拖拽元素
dragenter	ondragenter	进入有效的放置目标时候触发的事件	放置目标位置元素
dragleave	ondragleave	离开有效的放置目标触发的事件	放置目标位置元素
dragover	ondragover	在放置目标内移动出发的事件	放置目标位置元素
dragstart	ondragstart	在拖拽元素上开始触发拖拽的事件	拖拽元素
drop	ondrop	在有效的放置目标放置触发的事件	放置目标位置元素

部分事件注意点

dragstart在拖拽元素上开始触发拖拽的事件

可以在这个事件下面指定拖拽数据、反馈图像和拖拽效果

注意1:：一旦拖拽完成，dragend 事件会在拖拽源头（即触发 dragstart 的元素）上发生。无论拖拽是成功[1]还是被取消，这个事件都会被触发。

注意2: dragenter  或 dragover  事件的监听程序用于表示有效的放置目标，也就是被拖拽项目可能放置的地方。网页或应用程序的大多数区域都不是放置数据的有效位置。因此，这些事件的默认处理是不允许放置。如果你想要允许放置，你必须取消 dragenter 和 dragover 事件来阻止默认的处理。你可以在属性定义的事件监听程序返回 false，或者调用事件的 preventDefault()方法来实现这一点。在 dragenter和dragover 事件中调用  preventDefault() 方法将表明在该位置允许放置 。

<div ondragover="return false">
<div ondragover="event.preventDefault()">

DataTransfer

DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。

这个对象可以从所有拖动事件 drag events 的 dataTransfer属性上获取。

属性

• DataTransfer.dropEffect 获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为  none, copy, link 或 move

• DataTransfer.effectAllowed 提供所有可用的操作类型。必须是  none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized 之一。（此处的设置会对dropEffect有限制作用）

• DataTransfer.files 包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表

• DataTransfer.items 只读 提供一个包含所有拖动数据列表的 DataTransferItemList 对象

• DataTransfer.types 只读 一个提供 dragstart 事件中设置的格式的 strings 数组

方法

• DataTransfer.clearData() 删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，则删除与所有类型关联的数据。如果指定类型的数据不存在，或者 data transfer 中不包含任何数据，则该方法不会产生任何效果。

---

• DataTransfer.setData() 设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在，则在相同位置替换现有数据。

基础语法 dataTransfer.setData(format, data)

参数解释

format: 一个DOMString 表示要添加到 drag object的拖动数据的类型， 一般类型是这些格式是指定数据类型或格式的Unicode字符串，通常由MIME类型给出，但是我们在拖拽过程中可以定义自己的类型（例如：index myData等），相当于使用getData取值的时候的一个唯一值。

data: 一个 DOMString表示要添加到 drag object的数据

---

• DataTransfer.getData() 检索给定类型的数据，如果该类型的数据不存在或 data transfer不包含数据，则返回空字符串。

基础语法 const data = dataTransfer.setData(format)

参数解释

format 拖拽开始设置的数据格式

data：setData中设置的传递值

---

• DataTransfer.setDragImage() 设置拖拽过程中的自定义图像

基础语法 dataTransfer.setDragImage(img, xOffset, yOffset)

参数解释 img 用于拖曳反馈图像的图像 Element, 如果Element是一个img元素，则将拖动位图设置为该元素的图像（保持大小）

xOffset 拖拽过程中鼠标相对图片的横向坐标left

yOffset 拖拽过程中鼠标相对图片的纵向坐标top

注意点： 设置的图片要是已将加载完成的图片，否则可能会导致设置无效。

demo动画演示

实现代码

总结

对于实现拖拽来说还是比较方便的，相比较传统的使用鼠标的mousedown、 mousemove 、mouseup组合实现的拖拽简单了很多，少去了进入放置目标的判断，移动过程中移动元素的位置计算。

对于目前页面可视化操作，拖拽组价到画布中还是很方便的。

但是也有弊端，就是兼容性问题，但是这个在后续的迭代中，相信浏览器都会逐渐的兼容，前景还是不错的。 还有一点个人感觉需要改进的地方是，拖拽过程中可定制化的东西不多，比如我想改变鼠标的样式，目前只能使用可设置的几种，不够灵活。希望后续能有所完善。

参考资料

• MDN - 拖拽操作
• MDN - DataTransfer