HTML5拖拽API需设置draggable="true"、监听dragstart/dragover/drop等事件并阻止默认行为，通过dataTransfer传递数据，目标区须preventDefault()才能接收，还需视觉反馈与移动端降级。
HTML5拖拽API不用插件就能实现元素拖放交互，关键在于正确设置属性、监听事件、传递数据并阻止默认行为。
让元素可拖动
默认只有图片、链接和选中文本能拖动。其他元素要加 draggable="true" 才能成为拖拽源：
<div id="item1" draggable="true">任务一</div><img src="icon.png" draggable="true">
没这个属性，dragstart 等事件根本不会触发。
绑定拖拽事件并传数据
在拖拽源上监听 dragstart，用 dataTransfer.setData() 存标识信息：
立即学习“前端免费学习笔记（深入）”；
- 通常存元素 ID 或类型，比如
event.dataTransfer.setData('text/plain', 'item1') - 可选：调用
setDragImage()自定义拖拽时的图标 - 设
effectAllowed控制允许的操作（move/copy/link）
设置目标区域并接收数据
目标容器必须同时满足两个条件才能响应放置：
- 监听
dragover并立即执行event.preventDefault()—— 这一步必不可少，否则drop不会触发 - 监听
drop，同样调用preventDefault()，再用getData()取出数据 - 根据业务逻辑处理：追加子节点、交换位置、更新样式或触发状态变更
补充体验细节
光能动不够，用户需要明确反馈和容错：
-
dragenter时加高亮边框或背景色，dragleave时还原 -
drop后调用dataTransfer.clearData()，避免重复提交 - 移动端不支持桌面级拖拽，务必保留点击/选择等降级方案
不复杂但容易忽略。
