关键拖放事件包括源元素的dragstart、drag、dragend和目标元素的dragenter、dragover、dragleave、drop；需设置draggable="true"，在dragstart中setdata，在dragover中preventdefault，在drop中getdata并执行操作。
JavaScript 实现拖放功能主要依靠 HTML5 原生的 Drag and Drop API，不需要第三方库就能完成基本交互。核心在于正确监听和处理一系列拖放事件，并配合 dataTransfer 对象传递数据。
关键拖放事件有哪些
整个拖放流程涉及多个事件，按触发顺序分为“源元素”（被拖动的元素）和“目标元素”（可放置的区域）两类：
-
源元素上触发的事件：
dragstart（开始拖动）、drag（拖动中持续触发）、dragend（拖动结束，无论是否释放） -
目标元素上触发的事件：
dragenter（拖入目标区域）、dragover（在目标区域内移动，必须阻止默认行为才能触发 drop）、dragleave（离开目标区域）、drop（在目标上松开鼠标）
实现拖放的最小必要步骤
要让一个元素可拖、另一个区域可接收，需满足几个硬性条件：
- 被拖元素必须设置
draggable="true"属性（默认为false） - 在
dragstart中调用event.dataTransfer.setData(format, data)存储拖拽数据（如"text/plain"或"text/html"） - 在目标区域的
dragover事件中调用event.preventDefault()，否则drop事件不会触发 - 在
drop事件中用event.dataTransfer.getData(format)取出数据，并执行实际操作（如移动 DOM、更新状态等）
一个简单可用的例子
比如把一个 <div class="draggable"> 拖到 <code><div class="dropzone"> 中：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
<pre class='brush:php;toolbar:false;'>// 让元素可拖
document.querySelector('.draggable').draggable = true;
// 拖开始时存数据
document.querySelector('.draggable').addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', 'hello from draggable');
});
// 目标区允许放置
const dropzone = document.querySelector('.dropzone');
dropzone.addEventListener('dragover', e => e.preventDefault()); // 关键！
dropzone.addEventListener('drop', e => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
dropzone.textContent = data;
});</pre>
<h3>注意事项和<a style="color:#f60; text-decoration:underline;" title="常见问题" href="https://www.php.cn/zt/28932.html" target="_blank">常见问题</a>
</h3>
<p>拖放看似简单，但容易卡在几个地方：</p>
<ul>
<li>忘记在 <code>dragover 中调用 preventDefault() → drop 事件根本不会触发
draggable="true" → 元素无法被拖动（即使加了事件监听也没用）dataTransfer 的读写受安全策略影响touchstart/move/end 模拟，或引入 interact.js 等库基本上就这些。掌握这组事件和 dataTransfer 的配合，就能完成大多数 Web 拖放需求。
