值，但仅限于明确需要物理拖动隐喻的场景；普通列表应避免强行添加，优先采用点击排序或序号输入；原生拖拽需显式设置 draggable="true" 和 ondragover 阻止默认行为，移动端须模拟；框架集成要注意响应式更新与事件清理；无障碍支持是上线前提，需完善 aria 属性与键盘操作。
拖拽排序在现代列表交互中到底值不值得上？
值，但仅限于明确需要物理拖动隐喻的场景——比如看板管理（Trello）、待办卡片排序、仪表盘模块布局。普通数据表格或分页列表强行加拖拽，反而破坏键盘导航、增加无障碍障碍，且移动端兼容极差。
关键判断标准：dragstart 触发是否自然？用户能否预判拖动后的位置反馈？如果答案是否定的，优先用「点击升序/降序」或「输入序号保存」更稳妥。
原生 draggable + drop 事件为什么总卡在拖不动？
常见现象：鼠标按住元素没反应、拖到目标区松手没触发 drop、拖拽时出现禁止图标（?）。根本原因是浏览器默认阻止了大部分元素的拖拽行为，且 drop 区域必须显式调用 event.preventDefault()。
- 确保目标容器设置了
ondragover="event.preventDefault()"（或监听dragover并阻止默认） -
draggable="true"必须写在可拖动项上，且该元素需有非空textContent或img等可拖内容，纯空div拖不动 - 移动端无原生
drag事件支持，touchstart+transform位移模拟是唯一可行路径
SortableJS 在 Vue/React 中的坑比想象中多
它确实省事，但默认配置会悄悄破坏框架响应式更新——比如 Vue 中直接修改数组索引位置，v-for 的 key 不变，DOM 就不会重排；React 中若没用 useRef 绑定实例，卸载组件后拖拽事件可能泄漏。
实操建议：
- Vue：用
Sortable.create(el, { ... })后，监听onEnd回调，手动调用Array.splice()并触发nextTick，避免直接赋值数组 - React：务必在
useEffect清理函数中调用sortable.destroy()，否则测试时容易报Cannot read property 'parentNode' of null - 禁用动画：设
animation: 0，否则和 CSS 过渡冲突，拖拽中列表项会“跳帧”
无障碍与键盘支持不是锦上添花，而是上线前提
没有 aria-grabbed、aria-dropeffect 和焦点管理的拖拽列表，对屏幕阅读器用户等于不可用。Chrome 最新版本已开始警告缺失 role="application" 的可拖区域。
最低可行方案：
- 拖动项加
role="button" tabindex="0"，按Space或Enter触发模拟拖拽（用Sortable.option('disabled', false)临时启用） - 目标区加
aria-label="排序区域，当前可放置在第3位"，并在onMove中动态更新 - 禁用鼠标拖拽时（如小屏），自动 fallback 到「上下箭头按钮 + 序号输入框」组合
真正难的从来不是拖动逻辑，而是让拖拽在焦点、语音、缩放、触控、动画关闭等所有模式下都保持语义一致——这点常被跳过，直到被 WCAG 审计拦下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
