HTML Drag and Drop API

HTML原生拖放：draggable属性、dragstart/dragover/drop事件、DataTransfer数据传递、拖放文件上传（drop+FileReader）、自定义拖拽预览图 · 难度：入门 · +10XP

HTML 拖放 API —— 让元素可以拖拽

你有没有想过，网页上的文件上传区域为什么能把文件从桌面拖进去？这靠的是 HTML 拖放 API（Drag and Drop API）。

让元素可拖拽

<div id="dragBox" draggable="true">拖动我！</div>

完整拖放流程

// 1. 开始拖动
source.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', '这是拖过来的数据');
});
// 2. 允许放置（必须阻止默认行为！）
target.addEventListener('dragover', function(e) {
  e.preventDefault();
});
// 3. 放下
target.addEventListener('drop', function(e) {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  target.textContent = '收到：' + data;
});

拖拽文件上传

area.addEventListener('drop', function(e) {
  e.preventDefault();
  const files = e.dataTransfer.files;
  for (const file of files) {
    console.log(file.name, file.size + '字节');
  }
});

动手练习

1. 基础练习：做一个拖放区域，把一个div拖到另一个div里，目标区域显示被拖元素的文字内容。
2. 进阶应用：做一个文件拖放上传区——拖入图片后，用FileReader读取并在页面上预览图片。
3. 项目实战：做一个可拖拽排序的待办列表——列表项可以上下拖动来调整顺序。