dragstart 必须调用 dataTransfer.setData(),dragover 必须 preventDefault(),drop 必须 preventDefault() 并 getData();移动端不支持原生 drag/drop,需用 touch 事件模拟或第三方库。

dragstart 事件必须设置 dataTransfer
没有 dataTransfer.setData(),后续的 dragover 和 drop 就不会触发——浏览器默认会忽略拖放行为。常见错误是只加了 draggable="true" 却忘了在 dragstart 里存数据。
实操建议:
立即学习“Java免费学习笔记(深入)”;
- 必须在
dragstart中调用event.dataTransfer.setData('text/plain', 'some-id')(类型和值可自定义) - 若想允许拖入目标区域,
dragover里必须调用event.preventDefault(),否则drop永远不触发 - 推荐用
'text/plain'或'application/json'类型,避免用'text/html'引发意外解析
drop 事件里要主动阻止默认行为
很多开发者以为只要监听了 drop 就够了,结果发现文件或链接被浏览器直接打开/下载——这是因为浏览器对 drop 有默认处理逻辑。
实操建议:
立即学习“Java免费学习笔记(深入)”;
-
drop回调中第一行必须写event.preventDefault() - 再通过
event.dataTransfer.getData('text/plain')取出之前存的数据 - 如果拖的是真实文件(比如从桌面拖进页面),要用
event.dataTransfer.files而不是getData()
dragover 的 preventDefault 很容易漏掉
dragover 是唯一能“告诉浏览器:这里允许放置”的机会。它本身不带业务逻辑,但缺了它,drop 根本不会触发——哪怕你已经绑了 drop 事件。
PHP是程式语言、MySQL是资料库,要学好任何一种都不是件容易的事,而我们,还要将它做出成果出来!很难吗?不会的!有好的方法、好的流程,其实是可以很轻松的学会,并且应用在网页上的。 书里所介绍的是观念、流程,一个步骤一个步骤依照需求,就可以做出我们要的结果,不怕做不出来,希望藉由这本书,可以让你将这些观念实现在你的网站里。 PHP & MySQL的学习,只要有正确的观念、正确
实操建议:
立即学习“Java免费学习笔记(深入)”;
- 目标容器必须监听
dragover,且必须同步调用event.preventDefault() - 可以顺便设
event.dataTransfer.dropEffect = 'move'来改变光标样式 - 不要只靠 CSS 的
cursor: move,那只是视觉反馈,不影响实际拖放流程
移动端不支持原生 drag/drop API
所有主流 iOS 和 Android 浏览器(包括 Safari、Chrome for Android)都不支持 dragstart/drop 等事件。这不是 bug,是规范明确不强制实现的部分。
实操建议:
立即学习“Java免费学习笔记(深入)”;
- 做跨端项目时,别指望一套代码跑通 PC 和手机
- 移动端需改用
touchstart/touchmove/touchend+ 位置计算模拟拖放 - 第三方库如
interact.js或sortablejs(带 touch 支持版本)更可靠
document.querySelector('#draggable').addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', e.target.id);
});
document.querySelector('#dropzone').addEventListener('dragover', e => {
e.preventDefault(); // 关键!
e.dataTransfer.dropEffect = 'move';
});
document.querySelector('#dropzone').addEventListener('drop', e => {
e.preventDefault(); // 关键!
const id = e.dataTransfer.getData('text/plain');
e.target.appendChild(document.getElementById(id));
});
拖放真正难的不是事件名记不住,而是每个环节都依赖上一个环节的显式许可——少一次 preventDefault,整个链条就断了。









