使用HTML/CSS和JavaScript拖动实现-DEV365 开发者社区

drag＆drop 是网络开发人员必须愿意使用的重要技术之一。在本文中，我们将涵盖 drag＆drop 的重要事件。为了更好地理解，您需要熟悉：

html
javascript
DOM事件。

drag＆drop 事件可以分为两个：

在dragged element上发生的事件
在target element上发生的事件（ dropzone ）。

要使这些事件起作用，请将拖动元素中的可拖动属性设置为true。

<p draggable="true" class="dragged-item">This is our draggable element</p>

注意：默认情况下可拖动图像和链接（无需将可拖动属性设置为true）

拖动元素上发生的1个事件

这些事件是触发的事件，当可拖动元素从其原始位置移动到最终位置时。事件是：

dragstart事件
阻力事件
拖动事件

现在让我们讨论每个事件以查看何时以及如何使用这些事件。

a）拖放事件

当用户开始移动dragged元素时，dragstart事件触发。此事件使用koude4对象设置数据。

koude4对象使用setData方法设置数据。 setData方法采用两个参数：

格式要设置的数据（"text/plain"，"text/html"等）
数据值（字符串形式的任何内容）

e.dataTransfer.setData(format, data);

注意：上面的数据集，后来在drop事件中检索并使用。

DRAGSTART事件实现

添加dragstart event lister to draged元素
获取dragged元素的id以后使用（使用event.target.getAttribute("id")获取ID）。
将data（以text/plain格式）设置为拖动元素的id。数据是在dataTransfer对象中使用setData方法设置的。

const draggedElement = document.querySelector(".dragged-item");
draggedElement.addEventListener("dragstart",function(e){
    e.dataTansfer.setData("text/plain",e.target.id);
})

b）阻力事件

drag事件触发拖动元素正在移动时。 drag事件由于它在移动拖动元件时会触发而持续发射。

Drag事件提供了一个更改dragged元素外观的机会，以便用户可以可视化其动作。

在drag事件中，使用CSS更改dragged元素的外观。

拖动事件实现

添加drag事件侦听器到拖动元素
获取koud3元素（e.target）
更改拖动元素的颜色

draggedElement.addEventListener("drag",function(e){
    e.target.style.color = "grey";
})

注意：

如果您不更改拖动元素的外观
，则可以使用drag事件
可以在dataTransfer中使用setData方法在此drag事件中设置数据。

c）贡献活动

当拖动操作完成后，dragend事件触发。拖动操作可能会成功或失败。

此dragend事件使您可以将拖动元素的外观重置为拖动元素的初始外观。

贡献事件实施

添加dragend事件侦听器中拖动元素
获取拖动元素（e.target）
将拖动元素的颜色更改为其初始颜色

draggedElement.addEventListener("drag",function(e){
    e.target.style.color = "grey";
})

注意：如果您不更改拖动元素的外观

在下降目标元素上发生的2个事件

这些是当dragged元素在下降目标元件上移动时发生的事件（ dropzone ）。这些事件修改了 dropzone 元素。事件是：

Dragenter事件
Dragover事件
Drop Event
dragleave事件

让我们讨论以上事件以及应如何实施。

A）Dragenter事件

thedragenter拖动元素进入 dropzone 时会发射。此dragenter事件提供了一个视觉反馈，A dropzone 元素接受拖动元素（drop target）。

Dragenter事件实现

创建 dropzone html中的元素

<div class="drop-zone"></div>

获取 dropzone 使用选择器

const dropZone = document,querySelector(".drop-zone");

添加dragenter事件听众 dropzone 元素
使用e.target，修改 dropzone 元素（更改bacground颜色）。

dropZone.addEventListener("dragenter",function(e){
e.preventDefault()
e.target.style.border = "dotted 4px black";
})

注意： dragenter的默认行为是避免拖放元素的下降。 e.preventDefault()阻止了dragenter事件的默认行为，因此允许在 dropzone 中删除拖放元素。

b）拖曳事件

当拖动元件 dropzone 上方时，dragover事件会发射。这个dragover活动每毫秒射击。

dragover事件的主要目的是防止默认值。防止默认值，可防止拖动元素在处理drop事件时返回其原始位置。

Dragover事件实现

获取 dropzone 元素
添加dragover事件听众 dropzone 元素
防止dragover事件的默认值

dropZone.addEventListener("dragover",function(e){
e.preventDefault()
})

c）下降事件

当拖动元素掉落 dropzone 时，drop事件会发射。 drop事件是我们获取dragstart事件中设置的数据并使用数据的地方。数据是使用getData方法从dataTransfer对象获得的。

Drop事件实现

获取 dropzone 元素
添加drop事件听众 dropzone 元素
防止drop事件的默认值（删除时打开链接）
获取在dragstart事件中设置的数据，并将其存储在称为 draggedElementId 的变量中

   const draggedElementId = e.dataTransfer.getData("text/plain");

注意： draggedElementid 是字符串（拖动元素的id）

使用document.getElementById获取拖放元件，并将其存储在另一个称为 draggedElement 的变量中

const draggedElement = document.getElementById(draggedElementId);

获取 dropzone 元素（e.target）并附加 draggedElement

    dropZone.addEventListener("drop",function(e){
        e.preventDefault()
        const draggedElementId = e.dataTransfer.getData("text/plain");
        const draggedElement = document.getElementById( draggedElementId);
        e.target.appendChild(draggedElement);
    })

draggedElement 在 dropzone内部移动作为子元素。

d）拖曳事件

当拖动元件留下 dropzone 区域时，dragleave事件会发射。此dragleave事件可用于将Dropzone元素修改为其原始状态（删除dragenter事件中的视觉反馈）。

DragLeave事件实现

获取 dropzone 元素
添加dragleave事件听众 dropzone 元素
重置 dropzone 元素的原始状态

dropZone.addEventListener("dragleave",function(e){
        e.preventDefault()
        e.target.style.border = "solid 4px black";
    })

结论

总而言之，掌握这些 drag＆drop 事件对于创建交互式和用户友好的Web应用程序至关重要。它们允许您构建诸如拖放接口，文件上传等功能。

通过理解并有效地实施这些事件，您可以使用 drag＆drog 功能创建动态和用户友好的接口，从而增强了网站的用户体验和交互性。