HTML5 拖放

拖放（Drag and Drop）是 HTML5 标准的一部分：按住鼠标把某个元素拖到另一位置再松手。网页里的拖拽上传文件、拖动卡片排序，靠的都是这套 API。

拖放的基本概念

一次拖放涉及两方：

• 拖拽源：被拖动的一方，元素要设置 draggable="true" 才允许被拖。
• 放置目标：接收拖来元素的一方，通常是某个容器区域。 拖动过程中要传递的数据，放在事件对象的 dataTransfer 里携带。

拖放相关事件

事件	触发时机	通常绑定在
dragstart	开始拖动时	拖拽源
dragend	拖动结束时	拖拽源
dragenter	拖进目标区域时	放置目标
dragover	在目标区域上移动时	放置目标
dragleave	拖离目标区域时	放置目标
drop	松手放下时	放置目标

完整示例：把一个方块拖进方框

HTML 负责结构和样式，脚本负责三段事件逻辑：

<style>
#box { width:200px; height:200px; border:2px dashed #999; }
#drag { width:80px; height:80px; background:#FF6600;
        color:#fff; text-align:center; line-height:80px; }
</style>
<div id="box"></div>
<div id="drag" draggable="true">拖我</div>

<script>
var drag = document.getElementById("drag");
var box = document.getElementById("box");
drag.addEventListener("dragstart", function (e) {
    e.dataTransfer.setData("text/plain", "来自方块的数据");
});
box.addEventListener("dragover", function (e) {
    e.preventDefault();   // 关键：阻止默认行为，drop 才会触发
});
box.addEventListener("drop", function (e) {
    e.preventDefault();
    box.appendChild(drag);            // 把方块移进方框
});
</script>

在浏览器中显示为：一个橙色方块，把它拖到虚线方框上松手，方块就会被移进框内。

易错点

• dragover 事件里不调用 e.preventDefault()，drop 事件永远不会触发——这是新手最常见的坑。
• dataTransfer.setData 必须在 dragstart 事件里调用（Firefox 尤其严格）。
• 图片默认就能拖，而普通元素必须显式加 draggable="true"。
• 若要支持把系统文件拖进页面（如拖文件上传），用 dataTransfer.files 读取文件列表。

小结：HTML5 拖放由 draggable 属性加 dragstart、dragover、drop 等事件组成；只要记住"dragover 里必须 preventDefault"这条铁律，拖放功能就能顺利跑通。