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 UI Vue3

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 控制权

有些场景需要精确控制插入位置（比如表格 、卡片容器

），不能依赖虚拟 DOM 重排。组合函数应提供 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 等属性设置能力，方便调用方注入无障碍语义

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！