拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素

介绍

HTML5 提供了专门的拖拽与拖放的 API，目前各浏览器都已支持，包括 IE。HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。

事件类型

事件	On 型事件处理程序	触发时刻
drag	ondrag	当拖拽元素或选中的文本时触发。
dragend	ondragend	当拖拽操作结束时触发 (比如松开鼠标按键或敲 Esc 键)。
dragenter	ondragenter	当拖拽元素或选中的文本到一个可释放目标时触发。
dragleave	ondragleave	当拖拽元素或选中的文本离开一个可释放目标时触发。
dragover	ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。
dragstart	ondragstart	当用户开始拖拽一个元素或选中的文本时触发。
drop	ondrop	当元素或选中的文本在可释放目标上被释放时触发。

注意：当从操作系统向浏览器中拖拽文件时，不会触发 dragstart 和dragend 事件。

接口

给应用程序添加 HTML 拖放功能，主要使用 DragEvent 和 DataTransfer 这两个接口。

DragEvent

继承自 MouseEvent，有一个 dataTransfer 属性（DataTransfer 对象），在拖放交互期间传输的数据主要通过这个属性完成。

DataTransfer

保存着拖拽操作中的数据，例如拖拽事件的类型（如拷贝 copy 或者移动 move），拖拽的数据（一个或者多个项）和每个拖拽项的类型（MIME 类型）。

items 属性

包含包含所有拖动数据 DataTransferItem 对象的列表（DataTransferItemList 对象，包括 add、remove 和 clear 方法）。一个 DataTransferItem 代表一个拖拽项目，每个项目都有一个 kind 属性（值为 string 或 file）和一个表示数据项目 MIME 类型的 type 属性。DataTransferItem 对象也有获取拖拽项目数据的方法：DataTransferItem.getAsFile() 和 DataTransferItem.getAsString()。

DataTransfer 对象使用同步的 getData() 方法去得到拖拽项的数据，而 DataTransferItem 对象使用异步的 getAsString() 方法得到拖拽项的数据。

files 属性

包含数据传输中可用的所有本地文件的列表（FileList 对象）。如果拖动操作不涉及拖动文件，则此属性为空列表。

HTML draggable 属性

这个属性是枚举类型，而不是布尔类型。这意味着必须显式指定值为 true 或者 false，而不能简写。

• 拖拽选中文本、拖拽图像和拖拽链接时，会使用默认拖拽行为。
• 拖拽图像或链接时，图像或链接的 URL 被设定为拖拽数据。
• 对于其他元素，只有当它们作为被选中的一部分时，才会触发默认拖拽行为。

除了图像、链接和选择的文本默认的可拖拽行为之外，其他元素在默认情况下是不可拖拽的。如果要使其他的 HTML 元素可拖拽：

1.将想要拖拽的元素的 draggable 属性设置成 draggable=“true”。
2.为 dragstart 事件添加监听。
3.在定义的监听中设置拖拽数据。

<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">This text <strong>may</strong> be dragged.
</p> 

拖拽删除元素

拖拽右侧的列表项目到左侧时，在列表项目元素中通过 ondragstart 事件获取到当前的拖拽元素，然后在左侧容器元素中通过 ondrop 事件根据当前的拖拽元素，可以删除该列表项目。

拖拽排序

拖拽列表项目时，在列表项目元素中通过 dragstart 事件获取到当前的拖拽元素和事件的 offsetY，然后在列表容器元素中通过 dragover 事件，根据当前拖拽移动在上面的列表元素事件的 offsetY，对比当前拖拽中的元素的 offsetY，对当前拖拽移动在上面的列表元素进行 before 或 after 操作。

拖拽预览图片

从本地拖拽文件到页面中时，通过获取 DragEvent 的 DataTransfer 对象的 files 属性，然后由 URL.createObjectURL 创建对象 URL，可以预览该图片。

拖拽效果

HTML Drag and Drop API 方便了我们对拖拽数据的处理，如果需要实现 HTML 元素的拖拽移动，更加方便地是使用 mouse 事件。

1.设置要拖拽的元素绝对定位或是相对定位（position:absolute/relative）。
2.监听 onmousedown、onmouseup 和 onmousemove 事件，获取 clientX 和 clientY。
3.将获取到的 clientX 和 clientY 赋值给元素的 CSS 属性 left 和 top。

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享