拖放是一种常见的特性，即抓取对象以后拖到另一个位置
首先需要了解几个知识点
在拖动目标上触发事件(源元素):
ondragstart- 用户开始拖动元素时触发
ondrag- 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter- 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover- 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave- 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop- 在一个拖动过程中，释放鼠标键时触发此事件
例子:
html
js
下面是实现步骤：
一、确定什么是可拖动的
要使元素可拖动，需要添加draggable属性、ondragstart全局事件处理程序，如下面的代码示例所示
二、定义拖动数据
应用程序可以自由地在拖动操作中包含任意数量的数据项。每个数据项是string特定的type，通常是MIME类型，例如text/html。
每个drag event都有一个保存事件数据的dataTransfer属性。此属性（它是一个对象）也具有管理拖动数据的方法。该方法用于向拖动数据添加项目，如以下示例所示。DataTransfersetData()
三、定义拖动图像
默认情况下，浏览器会在拖动操作期间提供出现在鼠标指针旁边的图像。但是，应用程序可以使用setDragImage()如下例所示的方法来定义自定义图像。
四、定义拖动效果
该dropEffect属性用于控制用户在拖放操作期间给出的反馈（通常为视觉）。它影响浏览器在拖动时显示的光标。例如，当用户将鼠标悬停在目标放置元素上时，浏览器的光标可能指示将会发生的操作类型。
可以定义三种效果：
copy表示被拖动的数据将从当前位置复制到放置位置。
move表示被拖动的数据将被移动
link表示将在源和放置位置之间创建某种形式的关系或连接。
在拖动操作期间，可以修改拖动效果，以指示在某些位置允许某些效果。如果允许，则可能会在该位置发生故障。
以下示例显示如何使用此属性。
五、定义下拉区域
默认情况下，浏览器可以防止在将元素拖放到HTML元素上时发生任何事情。要更改该行为以使元素成为放置区域或可拖放，该元素必须具有事件处理程序属性ondragover和ondrop事件处理程序属性。以下示例显示如何使用这些属性并包含每个属性的基本事件处理程序。
目标
六、处理掉落效应
drop事件的处理程序可以以应用程序特定的方式自由处理拖动数据。通常，应用程序将使用该getData()方法来检索拖动项并相应地处理它们。此外，应用程序语义可能会因dropEffect修改键的值和/或状态的不同而不同。
从拖动数据中获取源元素的id，然后使用id将源元素移动到drop元素
七、拖动结束
在拖动操作结束时，dragend事件触发源元素 - 作为拖动开始目标的元素。此事件会触发拖曳完成还是已取消。该dragend事件处理程序可以检查的价值dropEffect属性来确定拖动操作成功与否。
网友评论