基于JavaScript的拖放功能

HTML拖拽API依靠DOM事件模型获取元素的拖拽和放置信息，从而实现拖拽功能。我们只需要注册几个事件侦听器，就可以使任何元素成为可拖动或可放置的。

除了提供基本的拖放界面之外，拖放API还可以提供除了拖放之外的选择来定制行为。例如，您可以修改拖放元素的CSS样式。或者，如果我们不移动元素，当我们拖动它时，我们会制作一个副本，当我们拖放它时，我们会有一个额外的相同元素。

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

使元素可拖动。

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

为简单起见，我们将移动元素称为拖动元素，拖动元素移动到的目标元素称为拖放区。

div class=' parent ' span id=' draggableSpan '可拖动/span span dropzone /span/div

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

接下来，添加属性draggable='true '来拖动元素，并将其设置为可拖动元素。

div class=' parent ' span id=' draggableSpan ' draggable=' true ' draggable/span span drop zone/span/div

现在，当你再次用鼠标拖动元素时，它会随着鼠标移动(抱歉，移动端不允许：see _ no _ evil:)。

如果未设置可拖动属性，默认值为自动。也就是说，是否可以拖动元素取决于浏览器的默认设置。例如，默认情况下，链接(a)是可拖动的，而span不是。

拖放事件处理程序

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

ondragstartondragoverondrop

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

数据传输

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

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

拖动时更新元素

接下来，我们开始设置ondragstart的事件处理程序。

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

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

我们想要实现的功能是将拖动元素移动到新的父元素中。我们需要获取拖动元素，因此我们需要通过setData属性保存拖动元素的ID:

函数onDragStart(事件){ event。数据传输。setData('text/plain '，event . target . id)；}从事件对象中获取拖动元素并设置CSS样式：

函数onDragStart(事件){ event。数据传输。setData('text/plain '，event . target . id)；事件。当前目标。风格。backgroundColor='黄色'；}注意：如果拖动时只想应用上面的黄色背景样式，拖动后应手动恢复样式。也就是说，如果在拖动开始时修改了元素样式，除非再次修改，否则样式不会自动恢复。彩虹：

拖动开始时的处理函数被写入，现在它被设置为可拖动元素的ondragstart属性：

div class=' parent ' span id=' draggableSpan ' draggable=' true ' onDragStart=' onDragStart(事件)；'可拖动/跨度跨度拖放区/跨度/div以下是用鼠标拖动时的效果：

现在拖动元素，ondragstart中的代码会执行，样式会改变，但是释放拖动的元素后不会发生任何事情。接下来，我们将把注意力转向dropzone。

将元素设置为可放置的

在ondragstart之后，下一个要写入的处理函数是ondragover。如上所述，默认情况下，浏览器会阻止放置行为。我们需要取消这种默认行为，双重否定是肯定的，对吗？

函数onDragOver(event){ event . preventdefault()；}在防止浏览器干扰后，您现在可以向dropzone添加拖动元素，dropzone成为可以接受任何拖动元素的容器元素。

div class=' parent ' span id=' draggableSpan ' draggable=' true ' onDragStart=' onDragStart(事件)；'可拖动span ondragover=' onDragOver(事件)；'Dropzone /span/div即使Dropzone现在可以接受拖动元素，释放鼠标后也看不到变化。

放置时怎么办？

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

我们的功能逻辑遵循以下步骤：

还记得setData中的数据集吗？现在我们需要从dataTransfer对象的getData属性中获取集合数据。数据内容是拖拽元素的ID，会返回给我们。使用上一步中获得的ID来获得拖动元素。获取dropzone元素。将把元素追加到拖放区。清理保存在数据传输对象中的数据。函数onDrop(event) { const id=event。数据传输。getData(' text ')；const draggableElement=document . getelementbyid(id)；const dropzone=event.targetdrop zone . appendchild(draggableElement)；事件。数据传输。clearData()；}因为这是我们要写的第三个也是最后一个函数，我们只需要把它传递给dropzone的ondrop属性，就完成了一个完整的拖放函数！

div class=' parent ' span id=' draggableSpan ' draggable=' true ' onDragStart=' onDragStart(事件)；'可拖动span ondragover=' onDragOver(事件)；'ondrop='onDrop(事件)；'拖放区/区域/分区

这里写的例子是最基本的。它展示了如何让页面上的任何东西都可以拖动。当然，一个网页可以同时包含多个可拖动元素和dropzone，或者使用文本中没有描述的其他事件来进行更细粒度的自定义设置。

下面显示了本文开头提到的简单待办事项列表功能。火：

根据上面所说的，可以稍微灵活地编写它。只需确保此处可拖动的待办事项的标识是唯一的。

摘要

以上是边肖介绍的基于JavaScript的拖放功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！