draggable属性仅启用拖放能力，需配合dragstart、dragover、drop事件实现排序；dragover必须preventdefault，drop时用insertbefore或占位符精准插入，并通过data-order同步状态。
draggable 属性本身不触发重排，必须配合 drag 事件监听
很多人以为给图标加 draggable="true" 就能拖拽排序，结果发现图标只是能被选中、拖动一小段就停住，松手后根本没位置变化。这是因为 draggable 只是开启原生拖放能力，真正控制目标位置、更新 DOM 顺序，得靠手动监听 dragstart、dragover、drop 这三个事件。
常见错误是只写 draggable="true" 却没阻止 dragover 的默认行为——浏览器默认禁止放置，所以 drop 根本不会触发。
- 必须在
dragover事件回调里调用e.preventDefault() -
dragstart中用e.dataTransfer.setData('text/plain', e.target.id)记录被拖元素（推荐用唯一id或data-index） -
drop时拿到目标容器，再根据鼠标位置决定插入点（比如用document.elementFromPoint或遍历兄弟节点比对getBoundingClientRect）
工具栏图标需包裹在可 drop 的容器内，且子元素要设 display: inline-flex 或 grid
如果工具栏用 <div class="toolbar"> 包着一堆 <code><button draggable="true"></button>，但容器没设高度、没设布局模式，拖拽时 dragover 事件可能无法稳定触发，尤其空隙大或图标间有 margin 时。
推荐把工具栏设为 display: inline-flex 或 display: grid，并确保容器有明确的 min-height（哪怕只有 1px），否则拖进空白区域时事件会丢失。
- 避免用
float或纯inline-block布局，它们对dragover的触发区域不友好 - 每个图标加
data-order属性，初始值按 DOM 顺序设好，后续重排后同步更新该值，方便保存配置 - 图标之间留
gap: 4px比用margin更可控，避免拖拽时因 margin 折叠导致定位偏移
drop 后 DOM 插入逻辑容易错位，建议用 insertBefore + 临界点判断
直接用 appendChild 只能把元素塞到末尾，无法实现“插到某个图标前面”。正确做法是在 drop 时获取鼠标相对于目标容器的位置，再遍历子节点，找出第一个 getBoundingClientRect().left 大于鼠标 x 坐标的元素，然后用 insertBefore 插入。
更稳妥的方式是监听 dragenter 或 dragover 时动态添加临时占位符（如一个带 class="drop-hint" 的 <span></span>），并在 drop 时把它替换成拖入的元素。
- 不要依赖
e.target在drop里的值——它可能是图标本身，也可能是图标内的子标签（比如<svg></svg>），应统一取e.target.closest('button[data-draggable]') - 拖拽过程中频繁触发
dragover，插入逻辑务必做防抖或节流，否则快速移动时 DOM 会反复重排 - 移动端不支持原生
draggable，需要额外用touchstart/move/end模拟，这点常被忽略
保存排序结果需序列化 data-order，别直接存 innerHTML
用户拖完一通，刷新页面又回到初始顺序？问题往往出在只把当前 DOM 结构存进 localStorage，而没提取逻辑顺序。DOM 顺序易受样式、JS 动态插入干扰，不可靠。
应该在每次 drop 完成后，遍历工具栏所有图标，收集它们的 dataset.order 值，组成数组如 ['icon-bold', 'icon-italic', 'icon-link']，再存进 localStorage。
- 初始化时优先读这个数组，用
document.getElementById(id).cloneNode(true)按序重建 DOM，而不是用innerHTML = ''再拼字符串 - 避免用
querySelectorAll('.toolbar > *')的索引当顺序——如果中间插入了非图标节点（比如分隔线<hr>），索引就全乱了 - 服务端若需持久化，传这个 ID 数组即可，别传整段 HTML
拖拽排序看着简单，实际卡点都在事件时机、DOM 插入精度和状态同步上。尤其是多个图标紧挨时，鼠标落在间隙里到底算“插在前还是后”，得靠坐标计算+边界容差，不能只靠 target 猜。
