如何用JavaScript编写一个支持长尾词的拖放功能？

本文共计2214个文字，预计阅读时间需要9分钟。

HTML的拖放API依赖于DOM和事件模型，用于获取和设置元素的拖放相关信息，实现拖放功能。只需注册少量事件监听器，即可将任意元素变为可拖动或可放置的。

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

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

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

将元素设置成可拖动的

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

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

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

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

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