拖放功能必须监听dragstart、dragover、drop三个原生事件：dragstart设置dataTransfer数据，dragover需preventDefault()才能触发drop且不可读取dataTransfer，drop中才可安全获取数据。
拖放功能必须监听哪些原生事件
JavaScript 拖放依赖一套固定事件链，漏掉任意一个环节都会导致“能拖但放不进去”或“拖不动”。核心是 dragstart、dragover、drop 三者配合，其中 dragover 默认被浏览器阻止（防止页面跳转），必须显式调用 event.preventDefault() 才能触发 drop。
-
dragstart：在被拖元素上触发，用于设置dataTransfer数据，比如event.dataTransfer.setData('text/plain', 'item-123') -
dragover：在目标容器上频繁触发，仅调用preventDefault()就够，**不能在此处读取dataTransfer（Safari 和部分 Chrome 版本会报错）** -
drop：在目标容器上触发，此时才能安全读取event.dataTransfer.getData('text/plain')
为什么 dragover 不写 preventDefault 就没反应
这是最常踩的坑：浏览器把 dragover 当作潜在导航行为（比如拖一个链接到标签页会打开），所以默认取消其默认行为。不加 preventDefault()，drop 根本不会触发——你看到的“拖到区域上光标变禁止符号”就是这个原因。
- 只对需要接收拖放的目标元素绑定
dragover，别全局监听 - 不要在
dragover里做耗时操作（如 DOM 查询、计算布局），它每毫秒可能触发多次 - 如果目标区域是空
<div>，记得设 <code>min-height或内容占位，否则没有尺寸就无法触发事件如何让元素可拖动（draggable 属性不是万能的）
HTML5 的
draggable="true"只对图片、链接、选中文本等默认可拖元素生效；普通<div> 即使加了该属性也不会触发 <code>dragstart，除非手动绑定并调用event.dataTransfer.setData()。- 对非原生可拖元素，必须用 JS 绑定
dragstart并设置数据，例如：element.addEventListener('dragstart', (e) => { e.dataTransfer.setData('application/json', JSON.stringify({ id: 'task-42' })); }); - 避免给
draggable="true"的元素再写dragstart监听器，否则可能触发两次 - 移动端不支持原生 drag/drop，需用
touchstart+touchmove+touchend模拟，或引入interact.js等库
drop 事件里怎么知道拖到了哪个位置
drop事件本身不提供坐标语义（比如“拖到列表第3项中间”），需要结合event.target和实际业务逻辑判断落点。立即学习“Java免费学习笔记（深入）”；
- 如果目标是列表项（
<li>），直接用event.target或向上查找最近的li元素 - 若需精确到“插入到某项之前/之后”，监听
dragenter+dragleave判断悬停区间，或用document.elementFromPoint(x, y)辅助定位 -
event.clientX/event.clientY是屏幕坐标，要转成相对于容器的偏移，得减去容器getBoundingClientRect().top/left
dataTransfer在不同上下文中的读写限制，才是真实项目里卡住进度的地方。 - 对非原生可拖元素，必须用 JS 绑定
