原生HTML拖拽需闭环三件事：拖拽源设数据、投放区许可、DOM更新与状态分离；dragstart不触发因draggable值非字符串"true"或未调setData；drop不触发因dragover未preventDefault；移动端原生API不支持，需降级方案。
原生 HTML 拖拽功能不是加个 draggable="true" 就能用，必须闭环三件事：拖拽源设数据、投放区主动许可、DOM 更新与状态分离——漏任一环都会静默失败，控制台零报错。
dragstart 事件不触发？检查 draggable 属性和 setData 调用
常见现象是鼠标悬停有抓取光标，但拖不动、无 dragstart 日志。根本原因有两个：
-
draggable必须是字符串"true"，写成draggable（无值）或 React 中的draggable={true}都无效 -
dragstart回调里必须调e.dataTransfer.setData()，哪怕只传空字符串''；不调就静默失败，Chrome/Safari 尤其严格 - 监听要挂在实际可拖元素上，不能只绑父容器——除非用事件委托，且需确保
e.target是带draggable="true"的子节点 - 避免
user-select: none或pointer-events: none父级样式拦截鼠标事件
推荐写法：
element.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('application/json', JSON.stringify({
type: element.dataset.componentType,
props: JSON.parse(element.dataset.props || '{}')
}));
e.dataTransfer.effectAllowed = 'move';
});
drop 事件不触发？关键在 dragover 阶段阻止默认行为
写了 ondrop 却没反应，90% 是因为 dragover 没拦。浏览器默认禁止任何区域接收拖放，drop 是否触发，完全取决于 dragover 是否持续调用 e.preventDefault()。
- 只在
dragenter里preventDefault()无效；dragleave不需要拦 -
dragover里建议同步设e.dataTransfer.dropEffect = 'move'，影响光标样式和投放可用性 - 如果投放区是滚动容器（如侧边栏面板），监听器必须挂载在最外层根节点，用事件委托——滚动后子项可能被重绘，直接绑定会丢失
- 空容器需有尺寸（如
min-height: 20px或padding），否则dragover根本不派发
正确绑定：
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
const data = JSON.parse(e.dataTransfer.getData('application/json'));
insertComponent(data); // 统一插入函数，不直接操作 DOM
});
拖进画布后组件没默认配置？别硬编码类型判断
靠 if (id === 'btn') 或 class 名匹配来初始化组件，扩展性为零，改一个类型就得动 JS。真实项目里，每个侧边栏项应自带结构化元信息。
立即学习“前端免费学习笔记（深入）”；
- 每个可拖项 DOM 上必须带
data-component-type="input"和data-preview-html属性，而不是靠 JS 写死逻辑 -
dragstart中用"application/json"类型传对象，比如：e.dataTransfer.setData("application/json", JSON.stringify({ type: "input", props: { placeholder: "请输入" } })) - 避免用
"text/plain"传中文或嵌套结构，Safari 容易截断或乱码 -
drop时统一解析 JSON 并调insertComponent()，所有初始化逻辑收口到这一层
移动端拖拽失效？原生 API 根本不支持
iOS Safari、Android Chrome、所有 WebView 场景下，draggable 属性和整套 Drag & Drop API 均不触发。这不是兼容性补丁能解决的问题，是规范层面未定义触摸拖拽行为。
- 不要尝试用
touchstart+touchmove模拟原生拖拽事件流——API 语义完全不同，dataTransfer在 touch 事件中不可用 - 真正可行的降级方案是：用
pointerdown/pointermove自行管理拖拽状态，配合elementFromPoint()判断投放目标 - 或者直接禁用移动端拖拽，转为“点击添加 + 表单编辑”模式，体验更可控
- 若必须支持，建议用
SortableJS这类已处理边界问题的库，而非硬啃原生 API
最后提醒：拖拽手柄（如 .resize 元素）若位于 <iframe> 或全屏 <canvas> 上方，记得设 pointer-events: none，但子元素要显式设回 pointer-events: auto，否则鼠标事件穿透失效。
