javascript如何实现拖放功能_它有哪些事件监听？

JavaScript原生拖放需三事件协同：dragstart设dataTransfer、dragover必须preventDefault、drop获取数据；dataTransfer仅支持字符串，需序列化对象；元素须设draggable="true"；移动端不支持需touch模拟。

JavaScript 实现拖放功能不难，但默认行为干扰多、浏览器兼容细节多，直接用原生 drag / drop 事件链必须手动阻止默认行为，否则 drop 事件根本不会触发。

dragstart、dragover、drop 这三个事件缺一不可

拖放不是“按住拖动就完事”，它是一套协作事件：只有在 dragstart 中设置 dataTransfer，并在 dragover 中调用 event.preventDefault()，drop 才会被浏览器允许触发。

• dragstart：用户开始拖拽元素时触发，必须在这里调用 event.dataTransfer.setData()，否则目标区域无法读取拖拽内容
• dragover：拖拽过程中持续触发（每几十毫秒一次），必须显式写 event.preventDefault()，否则浏览器会阻止 drop
• drop：松手释放时触发，此时才能获取 event.dataTransfer.getData() 并执行实际逻辑

dataTransfer 对象是唯一数据通道，但只支持字符串

dataTransfer 不是任意对象容器，它只接受字符串类型的数据。想传对象或 DOM 节点？得自己序列化。

• 只能用 setData('text/plain', 'xxx') 或 setData('text/html', '...')，不支持 setData('application/json', obj)
• 常用技巧：用 JSON.stringify() 存，JSON.parse() 取；或用自定义 MIME 类型如 'application/x-dnd-id' 存 ID 字符串
• 注意：Firefox 对 dataTransfer.items 支持更严格，Chrome 允许空 setData，但 Firefox 会静默失败

可拖拽需显式设置 draggable="true"，且仅限某些元素

不是所有 HTML 元素默认可拖拽。、

const box = document.getElementById('draggable-box');
box.draggable = true; // 或 HTML 中写 draggable="true"

box.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', 'box-123');
  e.dataTransfer.effectAllowed = 'move'; // 可选：限制光标样式
});

const dropZone = document.getElementById('drop-area');
dropZone.addEventListener('dragover', (e) 
=> {
  e.preventDefault(); // ⚠️ 必须！否则 drop 不会触发
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  console.log('dropped:', id);
});