HTML5 draggable 属性拖不动是因为仅设 draggable="true" 不够，必须在 dragstart 中调用 setData() 且在 dragover 中 preventDefault()；自由拖拽需改用 mouse/touch 事件手动实现。
HTML5 draggable 属性为什么拖不动？
直接给元素加 draggable="true" 只是开启原生拖拽入口，浏览器不会自动移动它——你得自己监听 dragstart、dragover、drop 等事件并写逻辑。常见错误是只设了 draggable="true" 就以为完事了，结果鼠标划过毫无反应。
必须做的两件事：
-
dragstart里调用event.dataTransfer.setData()，哪怕只是塞个空字符串，否则 Chrome/Firefox 会拒绝触发后续事件 - 目标容器（
drop区域）必须阻止dragover的默认行为，否则drop事件根本不会触发
element.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', ''); // 必须有这行
});
dropZone.addEventListener('dragover', e => {
e.preventDefault(); // 必须阻止默认行为
});
dropZone.addEventListener('drop', e => {
e.preventDefault();
console.log('已放入');
});如何让元素在页面内自由拖拽（非仅 drop 到指定区域）？
原生 draggable 只支持“拖出→悬停→放入”流程，不提供实时位置更新。要实现鼠标按住就移动元素（比如拖动弹窗、布局块），得放弃 draggable，改用 mousedown/mousemove/mouseup 手动控制。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 在
mousedown中记录鼠标相对元素左上角的偏移：offsetX = e.clientX - element.offsetLeft - 绑定
mousemove到document（防拖出容器丢失事件），计算新位置：left = e.clientX - offsetX - 用
position: absolute或transform: translate()更新位置，后者更流畅且不影响文档流 -
mouseup时解绑mousemove和mouseup自身，避免内存泄漏
拖拽时出现文字选中或浏览器默认行为怎么办？
拖拽过程中鼠标划过文字，浏览器可能意外选中文本；图片拖拽会触发浏览器下载；链接拖拽可能跳转——这些都源于未拦截默认行为。
统一处理方式：
- 对可拖拽元素设置
user-select: none（CSS），禁用文字选择 - 在
dragstart里调用e.preventDefault()，阻止图片/链接的默认拖拽行为 - 如果元素含
<img alt="index.html如何实现网页元素的拖拽功能？" >或<a></a>，建议在外层包裹一层<div draggable="true">，把原生拖拽入口转移到容器上<h3>移动端拖拽为什么完全失效？</h3> <p>iOS Safari 和 Android Chrome 默认不触发 <code>dragstart/drop等事件，原生拖拽在移动端基本不可用。必须降级为触摸事件模拟：- 监听
touchstart→ 记录初始坐标和偏移 - 监听
touchmove→ 计算位移，更新transform - 监听
touchend→ 清理状态 - 注意：需在
touchstart中调用e.preventDefault()阻止滚动，但别在touchmove里无条件阻止，否则页面无法滚动
复杂交互（如排序列表、画布拖拽）建议直接用
interact.js或SortableJS这类库，它们已封装好跨端兼容逻辑。原生方案在移动端容易陷入事件冲突和 touch-action 干扰的坑里。 - 监听
