网站建设优化一年赚几十万网站制作费用一览表
介绍
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的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
有需要的小伙伴，可以点击下方卡片领取，无偿分享