如何用javascript实现拖放功能【教程】

原生拖放API中drop不触发的根本原因是浏览器默认阻止dragover事件，必须在dragover中调用event.preventDefault()；dataTransfer仅支持字符串，推荐用ID查表还原数据；非draggable元素需手动设置draggable="true"；移动端需touch事件模拟。

原生 JavaScript 的拖放（Drag and Drop）API 表面简单，实际容易卡在 dragover 事件被忽略、drop 不触发、或数据传不进目标元素上——根本原因不是写法错，而是浏览器默认阻止了这些事件的默认行为。

为什么 drop 事件完全不触发？

因为浏览器对 dragenter 和 dragover 默认不做任何事，更不会让 drop 发生。你必须显式调用 event.preventDefault()，而且得在 dragover（以及可选的 dragenter）里调用。

• dragover 是唯一必须阻止默认行为的事件；漏掉它，drop 永远不会触发
• dragenter 阻止与否不影响 drop，但能控制“进入目标区域”的视觉反馈（比如加 class）
• 不能只在 drop 里 preventDefault()——太晚了，浏览器已经跳转或下载了

dataTransfer 只能传字符串？怎么传 DOM 元素或对象？

dataTransfer 的 setData() 方法只接受字符串类型值，但你可以用它传递标识符（如 ID 或索引），再在 drop 时查表还原真实数据。

• 不要尝试 setData('text/plain', JSON.stringify(obj)) 后在 drop 里 JSON.parse() ——跨域或安全策略可能拦截
• 推荐做法：拖拽开始前把源元素的引用缓存在全局 Map 或数组中，setData('text/id', 'item-123')，drop 时用该 ID 查找对应数据
• 如果只是移动 DOM 节点，直接 event.target.appendChild(draggedElement) 更可靠，无需走 dataTransfer

如何让非 draggable="true" 元素可拖？

只有设置了 draggable="true" 的元素（或表单控件、图片等原生可拖元素）才能触发拖拽起点。但你可以用 JS 主动触发：

立即学习“Java免费学习笔记（深入）”；

• 监听 mousedown，然后调用 element.setPointerCapture() + element.draggable = true 动态开启（注意后续要恢复）
• 更稳妥的做法：在目标元素上加 draggable="true"，再用 CSS user-select: none

  

  避免文字被误选
• 移动端不支持原生 drag API，必须用 touchstart/touchmove 模拟——这点常被忽略，导致 H5 页面拖放失效

最易被绕过的细节是：拖放过程中若鼠标移出窗口（比如切到别的标签页），dragend 仍会触发，但 drop 已经没了；此时应靠 dragleave 或定时器兜底清理状态。

# ai  # 浏览器  # app  # css  # js  # json  # go  # javascript  # java  # class  # 字符串  # 为什么  # Event  # map  # select  # 标识符  # 跨域  # 字符串类型 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】