拖拽功能实现选择

三种拖拽，三种机制

1️⃣ HTML5 原生 Drag & Drop（跨组件拖入）

 

场景：从左侧 Gallery 面板拖组件到画布上

原理：draggable="true" + dragstart/dragover/drop/dragend

关键：跨区域拖放，坐标从 drop 事件的 offsetX/offsetY 取

 

 

2️⃣ vue-draggable-resizable（画布内自由移动+缩放）

场景：画布上已有的组件拖动位置、拖角缩放尺寸

原理：组件库内部监听 mousedown/mousemove/mouseup

关键：绝对定位，自由 XY 移动，不是排序

 

3️⃣ vuedraggable（列表行排序）

场景：排序列表项上下拖拽换顺序

原理：SortableJS 的 Vue 封装，:list 绑定数组后拖完自动更新顺序

关键：最简单，不用手动 splice

 

4️⃣ sortablejs（表头列排序）

场景：el-table 表头左右拖拽换列顺序

原理：直接在 DOM 节点上 Sortable.create()，手动 splice 更新数据

关键：比 vuedraggable 更底层，要自己管实例的 create/destroy

 

一句话：1 是跨区域"拖进去"，2 是画布里"拖着走"，3 和 4 都是"换顺序"，3 是 Vue 组件自动同步，4 是裸 DOM 手动管理。