HTML5 drag API实现列表拖拽排序

news2025/10/31 0:20:17

拖拽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";
});