基于JavaScript实现拖放功能

拖放功能概述

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。

从技术角度看，DataTransfer接口可同时跟踪多个拖动对象的信息，但本文仅关注单个元素拖动的场景。:sparkles:

拖动时的视觉反馈

拖动时更新元素外观

下一步，开始配置 ondragstart事件的处理函数。

在拖动开始时，可在 ondragstart处理器中执行任意修改操作。例如，更新拖动元素的CSS样式，将其临时替换为图片，或访问DOM事件中可用的其他资源。

利用 dataTransfer对象的 setData方法可设置拖动状态信息。该方法接收两个参数：表示内容格式的字符串和实际传递的数据。

为实现将拖动元素移动到新父元素的功能，需获取源元素ID，并通过 setData方法保存该信息：

function onDragStart(event) {
 event
  .dataTransfer
  .setData('text/plain', event.target.id);
}

随后从事件对象中获取源元素并应用CSS样式：

function onDragStart(event) {
 event
  .dataTransfer
  .setData('text/plain', event.target.id);

 event
  .currentTarget
  .style
  .backgroundColor = 'yellow';
}

注意：若黄色背景样式仅在拖动时生效，需在拖动结束后手动恢复原样式。换言之，若在拖动开始时修改了样式，除非再次修改回原状，否则样式不会自动恢复。:rainbow:

拖动开始时的处理函数编写完毕后，将其绑定至可拖动元素的 ondragstart属性：

<div class='parent'>
 <span id='draggableSpan'
  draggable='true'
  ondragstart='onDragStart(event);'>
   draggable
 </span>

 <span> dropzone </span>
</div>

以下是使用鼠标拖动时的效果展示：

现在拖动元素时，ondragstart中的代码会执行，样式随之改变，但释放鼠标后并无后续动作。接下来将注意力转向放置区（dropzone）。

实现放置区交互

设置元素为可放置状态

完成 ondragstart后，下一个需编写的处理函数是 ondragover。如前所述，浏览器默认阻止放置行为，因此需取消该默认行为，即通过双重否定实现肯定效果。

function onDragOver(event) {
 event.preventDefault();
}

阻止浏览器干扰后，即可将拖动元素添加至放置区，使其成为接受任何拖动元素的容器。

<div class='parent'>
 <span id='draggableSpan'
  draggable='true'
  ondragstart='onDragStart(event);'>
   draggable
 </span>

 <span ondragover='onDragOver(event);'>
  dropzone
 </span>
</div>

尽管放置区现已接受拖动元素，但释放鼠标后仍无法看到视觉变化。

放置操作的具体执行逻辑是什么？

现在介绍第三个也是最后一个处理函数 ondrop。

该函数的逻辑遵循以下步骤：

• 还记得在 setData中设置的数据吗？
• 现在需从 dataTransfer对象的 getData属性中获取之前设置的数据，即拖动元素的ID。
• 利用上一步获取的ID找到源元素，并获取放置区元素。
• 将源元素追加（append）至放置区中。
• 清理 对象中保存的数据。

function onDrop(event) {
 const id = event
  .dataTransfer
  .getData('text');

 const draggableElement = document.getElementById(id);
 const dropzone = event.target;
 
 dropzone.appendChild(draggableElement);

 event
  .dataTransfer
  .clearData();
}

作为第三个且最后一个函数，只需将其绑定至放置区的 ondrop属性，即可完成完整的拖放功能！

<div class='parent'>
 <span id='draggableSpan'
  draggable='true'
  ondragstart='onDragStart(event);'>
   draggable
 </span>

 <span
  ondragover='onDragOver(event);'
  ondrop='onDrop(event);'>
   dropzone
 </span>
</div>

此处示例为最基础版本，旨在展示如何使页面内容具备可拖动性。实际应用中，网页可同时包含多个可拖动元素和放置区，或利用未介绍的其他事件进行更细粒度的自定义设置。

下文展示本文开头提及的简单待办事项列表功能。:fire:

只需基于前文内容稍作调整即可实现。关键在于确保待办项目的ID具有唯一性。

功能总结与应用

总结

以上介绍了基于JavaScript实现拖放功能的方法，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！ 若本文对您有帮助，欢迎转载，请注明出处，谢谢！