侧边栏拖拽排序必须监听dragstart、dragover、drop三事件并设flex布局；仅draggable="true"无效，dragover需preventdefault且容器要有min-height和flex/grid布局，drop用占位符插入而非appendchild。
侧边栏项目排序必须用 drag 事件，不能只靠 draggable="true"
加 draggable="true" 只是让元素能被拖起，它不会自动更新 DOM 顺序，也不会触发任何重排逻辑。你看到图标“能拖但不生效”，大概率是因为只写了属性、没监听事件。
真正起作用的是三个事件：dragstart 记录拖拽源，dragover 必须调用 e.preventDefault()（否则浏览器禁止放置），drop 才能执行插入操作。
-
dragstart中用e.dataTransfer.setData('text/plain', e.target.dataset.id)存唯一标识，别用e.target.id——如果图标里嵌了svg或span，e.target可能不是按钮本身 -
dragover的监听对象要是整个侧边栏容器，不是单个图标；且容器必须有明确的min-height和布局模式（如display: flex或grid），否则空区域无法捕获事件 -
drop里别直接用appendChild，它只能塞到末尾；要用insertBefore+ 鼠标位置判断，或提前插入临时占位符再替换
侧边栏容器必须设 display: flex 或 grid，不能用 float 或 inline-block
浮动和行内块对 dragover 的触发区域极不友好：图标间有 margin 时，鼠标悬停在间隙上事件就丢了；float 还会导致容器塌陷，dragover 根本无法绑定到父容器上。
推荐写法：.sidebar { display: flex; flex-direction: column; min-height: 1px; gap: 4px; }。其中 gap 比 margin 更可控，避免拖拽时因 margin 折叠导致定位偏移。
- 不要给侧边栏设
overflow: hidden，尤其在 iOS Safari 下会截断position: sticky行为（如果你后续加滚动锚点） - 如果侧边栏是
position: fixed，记得检查顶部导航栏真实高度（用开发者工具看 computed height），把top设成对应值，否则dragover区域可能被遮挡 - 每个项目加
data-order属性，初始按 DOM 顺序设好，drop后同步更新，方便序列化保存
跨区域拖拽（比如从侧边栏拖到编辑区）要靠全局状态管理
原生 draggable 不支持跨父节点移动。比如你想把一个「代码片段」图标从侧边栏拖进主编辑区生成一个 block，光靠 drop 事件拿不到源容器上下文。
必须用一个全局变量（或 React Context / Vue reactive）记录当前拖拽项的来源容器、类型、原始索引。否则 drop 时只能插入 DOM，没法触发对应的业务逻辑（比如插入 Markdown 语法、初始化组件实例）。
- 在
dragstart里存{ from: 'sidebar', type: 'snippet', index: 2 }，而不是只存 ID -
drop时先判断e.target.closest('.editor-content')是否存在，再根据from字段决定走哪套插入逻辑 - 不同目标区域应有明确的
data-drop-zone标识，避免误触发；dragenter阶段可加临时 class 做视觉反馈
drop 后 DOM 插入容易错位，优先用占位符方案
靠 getBoundingClientRect() 算鼠标 x/y 再比对兄弟节点位置，看似精确，实则在缩放、高 DPI 屏、滚动中极易偏移。更稳的做法是：在 dragover 时动态插入一个带 class="drop-hint" 的空 div，并用 insertBefore 它来完成最终插入。
- 占位符宽度设为
0、高度设为4px、背景色浅灰、pointer-events: none，不影响交互 -
drop时先remove()占位符，再把拖拽元素insertBefore到它原来的位置 - 别依赖
e.target在drop里的值——它可能是图标子元素，统一用e.target.closest('[data-draggable]')或容器内查找逻辑
dragover 的 preventDefault 和容器布局模式这两处。其他逻辑可以慢慢调，但这两点一漏，整个拖拽链路就断在第一步。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
