HTML 的拖放 API 依赖 DOM 事件模型，获取拖放和放置元素的相关信息，以此实现拖放功能。我们只需要注册很少几个事件监听器，就能把任何元素变成可拖动或可放置的。

拖放 API 除了提供基本的拖放功能接口外，还可以在拖放之外提供选择，用来自定义行为。比如，可以修改拖放元素的 CSS 样式。或者，我们不移动元素，拖动的时候，复制一个副本，拖放结束后，我们就会多了一个同样的元素。

本篇只介绍实现基本的拖放功能。

将元素设置成可拖动的

我们先从拖动元素开始。假设我们有一个容器元素，其中包含两种类型的子元素：可拖动元素和可放置元素。举个例子，如果我们有一个待办事项列表，我们可以将待办事项拖到“完成”区域。

简单起见，我们将移动的元素称为拖动元素，将拖动元素移入的目标元素称为 dropzone。

<div class='parent'> <span id='draggableSpan'>  draggable </span> <span> dropzone </span></div>

这是我们的第一段代码，子元素现在还 不能 拖动。

下面给拖动元素添加属性 draggable='true' ，将它设置成一个可拖动元素。

<div class='parent'> <span id='draggableSpan' draggable='true'>  draggable </span> <span> dropzone </span></div>

现在你再用鼠标拖动拖动元素的时候，它就会跟随鼠标移动（对不起，移动端不行:see_no_evil:）。

draggable 属性在没设置的情况下，默认值 auto 。就是说，元素是可不可以拖动，取决于浏览器的默认设置。比如，链接（ <a> ）默认就是可拖动的，而 <span> 就不是。

拖放事件处理器

到目前为止，如果我们拖动元素，释放鼠标，什么事都不会发生。拖动和放置都会触发事件，实现一个基本的拖放功能，我们最少需要用到拖放 API 中的三个事件：

ondragstart
ondragover
ondrop

学会使用 ondragstart 、 ondragover 、 ondrop 事件只是个开始。拖拽过程一共会涉及八个事件： ondrag 、 ondragend 、 ondragenter 、 ondragexit 、 ondragleave 、 ondragover 、 ondragstart 和 ondrop 。

DataTransfer

DataTransfer 接口中保存了与当前拖放过程相关的跟踪信息，信息从 DataTransfer 对象属性中获得，而 DataTransfer 对象又是从 DOM 事件对象中获得的。

技术上讲， DataTransfer 接口可以同时跟踪多个拖动对象的信息，我们这里只关注拖动一个元素的情况。:sparkles:

拖动时更新元素

下一步，我们开始设置 ondragstart 的事件处理器。

拖动开始时，我们可以在 ondragstart 处理器中，做任何想做的修改。比如更新拖动元素的 CSS 样式，将拖动的版本设置为临时图片，或者其他能从 DOM 事件中访问到的任何内容。

dataTransfer 对象的 setData 属性可以用来设置拖动状态信息。它接收两个参数，第一个参数是表示内容格式的字符串，第二个参数是实际传递的数据。