前端Wiki/HTML5/进阶/拖拽与文件

拖放 API

HTML5 原生拖放分两侧：被拖元素设 draggable="true"（img、链接默认可拖），监听 dragstart 把数据放进 dataTransfer；放置目标监听 dragover ——必须调用 preventDefault()，否则浏览器认为"这里不许放"，drop 永远不触发，这是拖放不生效的头号原因。

数据传递靠 dataTransfer：拖动方 setData(type, 数据)，放置方在 drop 事件里 getData(type) 取出，类型一般是 'text/plain'。drop 里同样要 preventDefault，防止浏览器直接打开被拖放的内容（比如拖入图片时浏览器会打开它）。

体验增强：目标容器监听 dragenter/dragleave 加高亮样式，提示"可以放这里"；dragend 在拖动结束后触发（无论成功与否），适合做清理。经典应用是看板拖卡片、拖拽排序。

本节要点拖动方：draggable + dragstart 里 setData；放置方：dragover 必须 preventDefault，drop 里 getData 取数据；drop 也要 preventDefault 防止浏览器打开文件。

HTML

<div id="box" style="min-height:120px;border:2px dashed #888;padding:10px">
  把下面的方块拖到这里
</div>
<div id="item" draggable="true"
     style="width:80px;height:80px;background:#4a9eff;color:#fff;
            text-align:center;line-height:80px">拖我</div>
<script>
  var box = document.getElementById('box');
  var item = document.getElementById('item');

  item.addEventListener('dragstart', function (e) {
    e.dataTransfer.setData('text/plain', item.id);  // 携带被拖元素 id
  });

  box.addEventListener('dragover', function (e) {
    e.preventDefault();            // 关键！不阻止默认行为 drop 不触发
  });

  box.addEventListener('drop', function (e) {
    e.preventDefault();            // 防止浏览器直接打开内容
    var id = e.dataTransfer.getData('text/plain');
    box.appendChild(document.getElementById(id));  // 放入容器
  });
</script>

🔗 相关词条HTML5 浏览器元素事件

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读