drop事件不触发是因为浏览器规范强制要求在dragover阶段调用event.preventdefault()，否则拒绝执行drop；datatransfer仅可靠传递text/plain字符串且限同源；需显式设置draggable="true"才能触发dragstart。
直接用 dragstart、dragover、drop 这三个事件就能实现基础拖放，但不阻止默认行为的话，drop 事件根本不会触发。
为什么 drop 事件不触发？
浏览器对 drop 有严格限制：只要没在 dragover 阶段调用 event.preventDefault()，就拒绝执行 drop。这不是 bug，是规范强制要求。
-
dragstart：在被拖元素上监听，用于设置dataTransfer -
dragover：在目标容器上监听，必须调用event.preventDefault()，否则drop不会触发 -
drop：在目标容器上监听，此时才能读取event.dataTransfer.getData()
dataTransfer 怎么传数据？
dataTransfer 只支持字符串类型，且只在同源页面间可靠传递；跨域或跨标签页时，多数浏览器仅保留 text/plain 或文件信息。
- 设置数据：在
dragstart中调用event.dataTransfer.setData('text/plain', 'my-id-123') - 读取数据：在
drop中调用event.dataTransfer.getData('text/plain') - 不要用
'text/html'或自定义 MIME 类型——兼容性差，Chrome/Firefox 表现不一致
如何让元素可拖动？
不是所有元素默认可拖，需显式设置 draggable="true" 属性，否则 dragstart 根本不会触发。
立即学习“Java免费学习笔记（深入）”；
- HTML 元素如
<div draggable="true"> 才能触发拖拽流程 <li> <code><img alt="如何实现JavaScript拖放功能_事件监听如何设置？" >和<a></a>默认可拖，但拖出的是图片 URL 或链接地址，不是你想要的业务数据 - 用 JS 动态设置：
element.draggable = true等价于加属性
const item = document.querySelector('#todo-1');
item.draggable = true;
item.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', item.dataset.id);
});
const dropZone = document.querySelector('.list');
dropZone.addEventListener('dragover', (e) => {
e.preventDefault(); // 关键！否则 drop 不触发
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
console.log('dropped:', id);
});
真正容易被忽略的是：没有 dragenter 监听时，用户无法感知“正在悬停可投放区域”；而 dragleave 的触发时机很微妙（子元素进出也会触发），做高亮反馈要小心状态错乱。
