拖拽API（Drag and Drop API）是HTML5提供的一组功能，使得在网页上实现拖放操作变得更加简单和强大。这个API允许开发者为网页元素添加拖拽功能，用户可以通过鼠标将元素拖动并放置到指定的目标区域。
事件类型
- dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
- darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
- dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
- dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
- dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
- drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
- dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
Draggable属性
HTML元素可以通过设置draggable属性为true来启用拖动。例如：
<div draggable="true">可拖动的元素</div>
DataTransfer对象
这些事件中的event对象包含一个dataTransfer属性，用于存储和传递拖拽的数据。例如，可以使用dataTransfer.setData和dataTransfer.getData方法来设置和获取拖拽的数据。
列表拖拽排序
演示
列表拖拽排序
完整代码
index.css
.list {padding: 24px 5%;
}.list .list-item {cursor: move;user-select: none;background-color: royalblue;padding: 16px 24px;border-radius: 5px;margin-bottom: 8px;color: white;
}.list-item.moving {background-color: #ccc;color: transparent;
}
index.html
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><div class="list"><div draggable="true" class="list-item">1</div><div draggable="true" class="list-item">2</div><div draggable="true" class="list-item">3</div><div draggable="true" class="list-item">4</div><div draggable="true" class="list-item">5</div></div><script src="./index.js"></script>
</body>
</html>
index.js
const list = document.querySelector('.list');
let source;
const handleDragStart = (e) => {setTimeout(() => {e.target.classList.add('moving'); // 设置拖拽样式}, 0);source = e.target;e.dataTransfer.effectAllowed = 'move'; // 设置鼠标样式
}
const handleDragEnter = (e) => {e.preventDefault();if (!source) return;const target = e.target;if (target === list || target === source) return; // 如果进入的元素是父元素或者是被拖动元素则不处理const sourceIndex = Array.from(list.children).indexOf(source); // children是类数组，对象类型const targetIndex = Array.from(list.children).indexOf(target);if (sourceIndex < targetIndex) {// 向下拖list.insertBefore(target, source); // 将目标元素插入到被拖拽元素之前} else {// 向上拖list.insertBefore(source, target); // 将被拖拽元素插入到目标元素之前}
}
const handleDragEnd = (e) => {e.target.classList.remove('moving'); // 移除拖拽样式source = null;
}list.addEventListener('dragstart', handleDragStart);
list.addEventListener('dragenter', handleDragEnter);
list.addEventListener('dragend', handleDragEnd);
list.addEventListener('dragover', e => e.preventDefault()); // 目标元素默认不允许被其他元素进入，被拖拽元素会回到原来位置，需要阻止此默认行为
移动端对 Drag API（Drag and Drop API）的支持
支持较差，原因如下：
-
原生支持有限
- 移动端的触摸事件（
touchstart、touchmove、touchend）与鼠标事件不同，很多浏览器不会触发dragstart、dragover、drop等拖拽相关的事件。 - iOS 的 Safari 以及 Android 浏览器大多数情况下 不支持
Drag API，特别是在 WebView 内。
- 移动端的触摸事件（
-
触摸事件冲突
- 触摸屏幕时，系统会优先触发
touch事件，而非drag事件，导致Drag API无法正常工作。 - 例如，在 iOS 上，
touchmove会默认滚动页面，而不会触发drag相关的事件。
- 触摸屏幕时，系统会优先触发
-
性能和交互体验
- 在移动端，拖拽操作通常由 手势 代替，比如滑动、长按拖动等。
- 例如，HTML5
Draggable属性 在桌面端可以生效，但在移动端一般不会响应dragstart事件。
解决方案：
如果想在移动端实现拖拽效果，推荐使用：
-
Touch Events 代替
Drag API- 监听
touchstart、touchmove、touchend事件，手动计算元素位置并移动。
- 监听
-
第三方库（更方便）
- SortableJS（支持 PC 和移动端）
- Interact.js（提供更丰富的拖拽交互）
示例代码：
如果你想在移动端实现拖拽，建议使用 touchmove 事件，例如：
移动端拖拽
const item = document.getElementById("draggable");let offsetX = 0; // 记录触摸点相对元素左上角的偏移
let offsetY = 0;item.addEventListener("touchstart", function (event) {let touch = event.touches[0];// 获取元素当前位置let rect = item.getBoundingClientRect();// 计算触摸点相对元素左上角的偏移offsetX = touch.clientX - rect.left;offsetY = touch.clientY - rect.top;// 使元素绝对定位item.style.position = "absolute";
});item.addEventListener("touchmove", function (event) {event.preventDefault(); // 阻止滚动let touch = event.touches[0];// 计算元素的新位置，保持触摸点在元素内的相对位置let newLeft = touch.clientX - offsetX;let newTop = touch.clientY - offsetY;item.style.left = newLeft + "px";item.style.top = newTop + "px";
});
这样可以在移动端实现类似拖拽的效果，而不依赖 Drag API。
