# Drag 拖拽基础
# 介绍
拖（Drag）和放（Drop）是 HTML5 标准的组成部分
# draggable 属性
现代浏览器中，不难发现，图片标签（<img />）是可以被长按拖拽，但如果需要自定义的 DOM 节点可以被拖拽需要配置以告诉浏览器提供对元素（Element / Tag）支持拖拽的能力。而元素是否允许被拖放且可响应 API 操作依赖于 draggable 全局标签属性
draggable 是一个布尔值类型的标签属性：
- true：元素可被拖拽
- false：元素不可被拖拽
//p元素可被拖拽
<p draggable="true">132-0803-3621</p>
# Drag & Drop 事件
HTML 的 drag & drop 使用了“DOM Event”和从“Mouse Event”继承而来的“drag event”
一个典型的拖拽操作： 用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标按住不放）至一个可放置的（droppable）元素上，然后松开鼠标。在拖动元素期间，一些与拖放相关的事件会被触发，像 drag 和 dragover 类型的事件会被频繁触发
| 事件类型 | 事件处理器 | 触发时机 | 绑定元素 |
|---|---|---|---|
| dragstart | ondragstart | 当开始拖动一个元素时 | 拖拽 |
| drag | ondrag | ondrag | 拖拽 |
| dragend | ondragend | 当拖动的元素被释放（🖱️ 松开、按键盘 ESC）时 | 拖拽 |
| dragenter | ondragenter | 当拖动元素到一个可释放目标元素时 | 放置 |
| dragexit | ondragexit | 当元素变得不再是拖动操作的选中目标时 | 放置 |
| dragleave | ondragleave | 当拖动元素离开一个可释放目标元素 | 放置 |
| dragover | ondragover | 当元素被拖到一个可释放目标元素上时（100 ms/次） | 放置 |
| drop | ondrop | 当拖动元素在可释放目标元素上释放时 | 放置 |
各个事件的时机可以用下面这个图简单表示：
注意： dragOver 事件的默认行为是：“Reset the current drag operation to "none"”。也就是说，如果不阻止放置元素的 dragOver 事件，则放置元素不会响应“拖动元素”的“放置行为”
// 让绑定该事件的元素支持放置
function handleDragOver(e) {
// 阻止默认的重置行为
// 即可成为拖拽元素的放置区
e.preventDefault();
}
在上述的事件类型中，不难发现，放置元素和拖动元素分别绑定了自己的事件，可如何将拖拽元素和放置元素建立联系以及传递数据。
这就涉及到 DataTransfer 对象：
DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型
关于DataTransfer对象的详细介绍，请参考：DataTransfer
← DataTransfer 对象 参考 →