📅 最后修改于: 2023-12-03 15:15:36.360000 🧑 作者: Mango
拖动事件是指允许用户通过拖动页面元素来执行某些操作的事件。在网页中，可以通过 HTML 和 DOM 来实现拖动事件。
HTML 中的拖动事件通常用于元素的拖放操作。要实现该操作，需要使用 draggable 属性和的 ondragstart、ondragover 和 ondrop 事件。
以下是一个简单的示例，说明如何实现拖放操作：
<!DOCTYPE html>
<html>
<head>
<title>HTML Drag and Drop Example</title>
<style>
#drag {
width: 100px;
height: 100px;
background-color: #ff0000;
text-align: center;
line-height: 100px;
color: #ffffff;
cursor: move;
}
</style>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="drag" draggable="true" ondragstart="dragStart(event)">Drag Me</div>
<div id="drop" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</body>
</html>
在上面的示例中，我们拖拽一个具有 id 为“drag”的 div 元素到一个具有 id 为“drop”的 div 元素上。当拖拽开始时，dragStart() 函数将设置所拖动元素的 id，并将其存储在 event.dataTransfer 属性中；当拖拽结束时，drop() 函数取出存储在 dataTransfer 属性中的 id，并将其放在目标元素的内部。
DOM 拖动事件是用于处理在文档中拖动元素或文本时触发的事件。类似于 HTML 拖动事件，DOM 拖动事件包括 dragstart、dragover 和 drop 事件。
以下是一个简单的示例，说明如何使用 DOM 实现拖动事件：
let dragItem = document.querySelector("#drag");
let dropZone = document.querySelector("#drop");
dragItem.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text", event.target.id);
});
dropZone.addEventListener("dragover", function(event) {
event.preventDefault();
});
dropZone.addEventListener("drop", function(event) {
event.preventDefault();
let data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
});
在上面的代码中，我们用 DOM 事件监听器添加了 dragstart、dragover 和 drop 事件。当用户开始拖动元素时，dragstart 事件将设置所拖动元素的 id 并将其存储在 dataTransfer 属性中。当元素被拖放到可放置区域上时，drop 事件将取出存储的 id 并在 dropZone 元素中放置它。
从上述例子可以看出，HTML 和 DOM 都可以很容易地用于实现拖动事件。你可以根据需要选择其中一个来实现你的拖动事件。