什么是 HTML5 的拖放 API（Drag and Drop）？

知识点图片

HTML5 拖放 API (Drag and Drop API) 是一组标准的事件和方法，允许用户在网页中“抓取”一个对象（DOM 元素），并将其拖动到另一个位置（目标元素）进行放置。

它是 HTML5 标准的一部分，旨在让交互变得更加直观，比如：

在看板（如 Trello）中移动任务卡片。
将商品拖入购物车。
将本地文件拖入浏览器进行上传。

核心概念与步骤

要实现拖放功能，主要涉及三个部分：

被拖动元素 (Source): 你要移动的那个东西。
放置目标 (Target): 你要把东西放进去的容器。
数据传输 (DataTransfer): 在拖动过程中传递的数据。

1. 激活拖动

默认情况下，只有图片（<img>）和链接（<a>）是可以拖动的。对于其他元素（如 div），你需要添加 draggable="true" 属性。

html

<div id="item" draggable="true">我是可拖动的</div>

2. 拖放生命周期事件 (Events)

API 提供了 7 个主要事件，分为两类：绑定在被拖动元素上的，和绑定在放置目标上的。

阶段	事件名	触发对象	描述
开始	`dragstart`	被拖动元素	用户开始拖动元素时触发。通常在这里设置传输的数据 (`setData`)。
过程	`drag`	被拖动元素	拖动过程中持续触发（类似 `mousemove`）。通常很少用。
进入	`dragenter`	放置目标	被拖动元素进入目标区域时触发。用于高亮显示目标。
悬停	`dragover`	放置目标	被拖动元素在目标区域上方移动时持续触发。重要：必须在此阻止默认行为 (`e.preventDefault()`)，否则无法触发 `drop` 事件。
离开	`dragleave`	放置目标	被拖动元素离开目标区域时触发。用于取消高亮。
放置	`drop`	放置目标	用户在目标区域释放鼠标时触发。在这里处理数据 (`getData`) 和 DOM 操作。
结束	`dragend`	被拖动元素	拖放操作结束（无论成功与否）时触发。用于清理样式或重置状态。

3. DataTransfer 对象

这是拖放 API 的核心，用于在 dragstart 和 drop 之间传递数据。它挂载在事件对象 event.dataTransfer 上。

setData(format, data): 设置数据（在 dragstart 中使用）。
getData(format): 获取数据（在 drop 中使用）。
files: 如果是从桌面拖拽文件，这里包含文件列表。

完整代码示例

下面是一个最简单的例子：将左边的盒子拖到右边的框里。

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        .container {
            display: flex;
            gap: 20px;
        }
        .box {
            width: 200px;
            height: 200px;
            border: 2px dashed #ccc;
            padding: 10px;
        }
        #draggable-item {
            width: 100px;
            height: 50px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 50px;
            cursor: move;
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 放置目标 1 -->
    <div class="box" id="zone1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <!-- 被拖动元素 -->
        <div id="draggable-item" draggable="true" ondragstart="drag(event)">
            拖动我
        </div>
    </div>

    <!-- 放置目标 2 -->
    <div class="box" id="zone2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<script>
    // 1. 当拖动开始时
    function drag(ev) {
        // 设置传输的数据：这里我们传输元素的 ID
        ev.dataTransfer.setData("text", ev.target.id);
        console.log("开始拖动");
    }

    // 2. 当在目标上方悬停时
    function allowDrop(ev) {
        // 默认情况下，浏览器禁止元素被放置到其他元素中
        // 必须阻止默认行为才能允许放置
        ev.preventDefault();
    }

    // 3. 当放置发生时
    function drop(ev) {
        ev.preventDefault();
        // 获取之前设置的数据 (元素的 ID)
        var data = ev.dataTransfer.getData("text");
        // 将被拖动的元素追加到目标容器中
        ev.target.appendChild(document.getElementById(data));
        console.log("已放置");
    }
</script>

</body>
</html>

进阶场景：文件拖拽上传

除了拖动 DOM 元素，HTML5 DnD 最常用的场景是文件上传。当用户从操作系统把文件拖进浏览器时，不需要 dragstart，只需要处理 drop。

javascript

const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault(); // 必须阻止，否则浏览器会直接打开文件
    dropZone.classList.add('highlight');
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('highlight');

    // 获取文件列表
    const files = e.dataTransfer.files; 
    
    if (files.length > 0) {
        console.log('文件名:', files[0].name);
        // 这里可以调用上传函数 uploadFile(files[0]);
    }
});

优缺点总结

优点：

原生支持： 不需要引入 jQuery UI 等庞大的库。
跨应用能力： 支持从桌面拖拽文件到浏览器。
性能： 相比基于 mousemove 模拟的拖拽，原生 API 性能更好。

缺点：

样式限制： 拖动时的“幽灵图像”（Ghost Image）很难自定义样式（只能是原元素的半透明截图或简单的图片）。
移动端支持差： 原生 HTML5 拖放 API 在移动设备（触摸屏）上支持非常不好。通常需要使用 Touch Events 模拟或使用库（如 react-dnd-html5-backend 配合 react-dnd-touch-backend）。
API 繁琐： 必须处理 dragover 并阻止默认行为才能触发 drop，这对初学者来说是个常见的坑。

播面