点击按钮后让某个<div>进入可拖拽状态的正确做法是：动态设置draggable=true，并在ondragstart中调用dataTransfer.setData()，否则拖拽无效；多元素时需单独控制目标元素；移动端不支持原生draggable，应改用touch事件或专用库。
点击按钮后让某个 <div> 进入可拖拽状态
HTML 原生 draggable 属性默认是静态的，设为 true 后元素就一直可拖，没法“按需开启”。真正可控的做法是：用 JavaScript 动态设置 draggable 属性，并配合 dragstart 事件做权限控制。
常见错误是只改属性却不处理 dragstart —— 浏览器会忽略没触发该事件的拖拽尝试，导致点了按钮也没反应。
- 先给目标元素设
draggable="false"（避免初始可拖） - 按钮点击时执行：
targetElement.draggable = true - 同时监听
targetElement.ondragstart，在里面调用event.dataTransfer.setData()，否则拖拽会被静默取消 - 拖拽结束后建议重置：
targetElement.draggable = false（可选，视交互逻辑而定）
为什么 element.draggable = true 单独设置不生效
这是个容易被忽略的兼容性细节：Chrome 和 Firefox 要求 dragstart 事件中必须调用 dataTransfer.setData()，哪怕只是塞个空字符串。否则即使 draggable 是 true，拖拽也会失败，控制台无报错，但光标不变、没拖影。
典型场景是想拖一个卡片到另一个容器，结果点住拖不动——大概率卡在这一步。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
element.ondragstart = (e) => e.dataTransfer.setData('text/plain', '') - 不能只写：
element.ondragstart = () => {}（无效） -
setData()第一个参数可以是任意类型标识，如'application/json'，但必须有值
用按钮切换多个元素的拖拽开关
如果页面里有多个候选拖拽项（比如一组任务卡片），按钮要“激活当前选中的那个”，而不是全部放开。这时候靠 class 或 data 属性标记状态比遍历更可靠。
别用 querySelectorAll('[draggable="true"]') 来找——初始时它们全是 false，查不到；也别依赖 CSS 类名是否含 active 来判断是否可拖，因为 draggable 属性才是真实开关。
- 推荐做法：按钮点击时，先清除所有元素的
draggable属性：document.querySelectorAll('.draggable-item').forEach(el => el.draggable = false) - 再根据上下文（比如最近一次点击的卡片）设
target.draggable = true - 每个元素独立绑定自己的
ondragstart，避免事件委托带来的 target 不明确问题
移动端不支持原生 draggable，得换方案
iOS Safari 和大部分安卓 WebView 对 draggable 支持极差，甚至设了也完全没响应。这不是 bug，是规范限制——拖拽 API 默认只面向桌面指针设备。
如果产品必须支持触屏拖拽，不要浪费时间调试 draggable，直接上 touchstart/touchmove + transform 位移模拟，或者引入轻量库如 interact.js（它内部已处理设备差异）。
强行在移动端启用 draggable 的唯一“技巧”是加 ontouchstart="event.preventDefault()" 阻止默认行为，但这会破坏滚动，得不偿失。
