原生HTML实现可拖拽侧边栏需用data-component-type和data-preview-html标记组件项，dragstart中以application/json传输序列化type与props对象，drop时解析并调统一插入函数；折叠禁用display:none，改用visibility:hidden+height:0；事件委托绑定于侧边栏根容器，避免滚动或折叠导致监听失效。
原生 HTML 实现可拖拽组件侧边面板，核心不是“加个 draggable”，而是用 data-transfer 传结构、用事件委托保绑定、用 visibility: hidden 避免折叠中断拖拽。硬编码类型匹配、用 display: none 折叠侧边栏、在滚动容器里直接读 getBoundingClientRect()——这三类写法一上就崩。
怎么让侧边栏组件拖进画布后带默认配置
拖入画布的不能只是个空 <div>，必须携带初始化所需的 type 和 props。靠 class 名或 innerText 匹配是反模式，扩展性为零。
- 每个侧边栏项 DOM 上必须带
data-component-type="button"和data-preview-html='<button>点击我</button>'这类属性，而不是靠 JS 里写死if (id === 'btn') {...} -
dragstart中必须用event.dataTransfer.setData("application/json", JSON.stringify({ type: "input", props: { placeholder: "请输入" } }))，别用"text/plain"，否则中文或嵌套对象会乱码或截断 - 画布
drop事件里直接JSON.parse(event.dataTransfer.getData("application/json"))，再调统一插入函数，避免重复逻辑
为什么侧边栏一滚动/折叠，拖拽就失效或拖出隐藏项
滚动时 getBoundingClientRect() 返回值含滚动偏移，折叠时若用 display: none，事件监听器会丢失绑定，dragstart 触发的仍是 DOM 树里已不可见的节点。
- 所有 drag 监听必须挂载在侧边栏根容器上，用事件委托：比如
sidebar.addEventListener("dragstart", handleDragStart)，而非给每个子项单独绑 - 折叠动画改用
visibility: hidden+height: 0+overflow: hidden，保留 DOM 可访问性和事件能力 -
handleDragStart回调里立刻读e.target.dataset，不缓存、不依赖 hover 状态，防止滚动后取到错位节点
如何防止拖拽手柄被 iframe 或 canvas 拦截鼠标事件
常见于可视化编辑器中，右侧画布含 <iframe> 或全屏 <canvas>，拖拽线划过时突然中断，松手后位置错乱。
立即学习“前端免费学习笔记（深入）”；
- 拖拽手柄（如
.resize元素）必须设pointer-events: none，但其子元素（如提示文字或按钮）需显式设回pointer-events: auto - 若手柄位于 iframe 上方，确保 iframe 的
sandbox属性不含"allow-pointer-lock"，且未设seamless（已废弃，但旧项目可能残留） - canvas 场景下，不要把 resize 手柄放在
canvas的position: absolute叠层里；应作为兄弟节点置于 canvas 外层容器中，并用z-index显式控制层级
拖拽过程中怎么实时限制面板不超出视口或容器边界
不限制会导致组件被拖到屏幕外、消失、无法恢复。计算不能靠 window.innerWidth（含滚动条宽度），也不能每帧都调 getBoundingClientRect()（性能杀手）。
- 视口限制用
document.documentElement.clientWidth和clientHeight，提前缓存，mousemove 中只做Math.max(0, Math.min(newLeft, maxX))运算 - 若限制在某容器内（如
#workspace），缓存该容器的rect = workspace.getBoundingClientRect()，后续只读rect.left/rect.top/rect.width/rect.height - 注意：别在
mousemove里反复调panel.getBoundingClientRect()算自身尺寸——宽高不变就缓存一次，否则重排开销陡增
最易忽略的是拖拽状态清理：mouseup 后必须立刻解绑 document 上的 mousemove 和 mouseup，否则下次点空白处可能意外触发移动；还有 dataTransfer 对象在 drop 后不会自动清空，跨区域拖拽时得手动重置。
