Vue 3 拖拽排序逻辑复用应封装为自定义 Hook useDragSort，统一管理拖拽状态、位置计算、数据更新与 DOM 同步，支持手柄触发、跨布局适配、触摸降级及无障碍语义。
Vue 3 中实现拖拽排序的逻辑复用，核心是把“拖拽状态管理、位置计算、数据更新、DOM 同步”这几块共性能力抽离成可组合、可复用的逻辑单元，而不是在每个组件里重复写 dragStart/dragOver/drop 事件处理和数组 splice。最实用的方式是封装为自定义 Hook（即组合式函数），配合响应式 API 和 DOM 操作控制权，做到高内聚、低耦合。
用组合式函数封装拖拽逻辑
创建一个 useDragSort 函数，接收原始列表 ref 和可选配置（如 ID 字段名、是否启用动画、是否只允许手柄触发），返回拖拽所需的状态与方法：
-
内部维护：
dragIndex（被拖项索引）、hoverIndex（当前悬停目标索引）、isDragging（是否处于拖拽中）等响应式状态 -
暴露方法：
handleDragStart、handleDragOver、handleDrop，直接绑定到模板事件上 -
数据更新不侵入业务：只负责调用传入的
onReorder回调，由使用者决定是直接修改原数组，还是触发 API 更新、或更新 sort 字段
支持手柄触发与事件委托
避免整行可拖带来的误触问题，逻辑层需识别拖拽源是否来自手柄元素（例如 .drag-handle）。在 handleDragStart 中检查 e.target 并向上查找，未命中则 e.preventDefault() 并中止：
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 模板中只需给手柄加
draggable="true"，列表项本身不设 draggable - 组合函数内统一做
event.composedPath().some(el => el.classList?.contains('drag-handle'))判断 - 这样既保持 DOM 简洁，又让手柄逻辑完全收敛在 hook 内，切换图标或 class 名也不影响调用方
跨组件复用时保持 DOM 控制权
有些场景需要精确控制插入位置（比如表格 <tr>、卡片容器 <code><div class="grid">），不能依赖虚拟 DOM 重排。组合函数应提供 <code>getTargetElement 或 insertBefore/insertAfter 辅助方法，供调用方在 onDrop 后手动操作真实 DOM：
立即学习“前端免费学习笔记（深入）”；
- 例如返回
moveItemTo(targetEl: HTMLElement, position: 'before' | 'after')，内部用targetEl.before(draggingEl)实现瞬移 - 搭配
transition-group的move过渡类，视觉动画与 DOM 移动分离，体验更顺滑 - 这种设计让 hook 不绑定具体渲染结构，适配表格、列表、网格、表单字段区等各种布局
适配移动端与无障碍
纯 HTML5 Drag API 在移动端失效，所以逻辑抽象必须预留降级入口。组合函数可内置轻量级触摸模拟层（监听 touchstart/touchmove/touchend），或通过配置项对接第三方方案（如 SortableJS 的 forceFallback: true）：
- 对外暴露
enableTouchSupport: boolean配置，默认为 true - 当检测到触摸设备且未启用第三方库时，自动启用内部 touch fallback 逻辑
- 同时保留
aria-grabbed、aria-dropeffect等属性设置能力，方便调用方注入无障碍语义
