前端拖拽交互实战：告别原生 API 的卡顿体验

注意：这里的 onDragEnd 逻辑是关键，它处理了数组的重新排序。实际开发中要注意数据不可变性，避免直接修改 state。

2. 通用方案：sortablejs

如果不需要 React 绑定，或者需要在 Vue、jQuery 甚至纯 JS 项目中使用，sortablejs 是个轻量且强大的选择。

import Sortable from 'sortablejs';

function initSortable() {
  const el = document.getElementById('sortable-list');
  new Sortable(el, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    dragClass: 'sortable-drag',
    onEnd: (evt) => {
      console.log(`从 ${evt.oldIndex} 移动到 ${evt.newIndex}`);
      // 这里触发你的数据更新逻辑
    }
  });
}

在 Vue3 中结合使用也很方便：

<script setup>
import { ref, onMounted } from 'vue';
import Sortable from 'sortablejs';

const listRef = ref(null);

onMounted(() => {
  new Sortable(listRef.value, {
    animation: 150,
    onEnd: (evt) => {
      // 更新数据顺序
    }
  });
});
</script>

实战技巧与最佳实践

库的选择策略

• react-beautiful-dnd：适合 React 列表场景，体验好，维护活跃。
• dnd-kit：React 现代拖拽库，模块化设计，更灵活。
• sortablejs：通用性强，支持多框架，配置简单。
• interact.js：如果需要复杂的手势交互或 Canvas 拖拽，选这个。

提升体验的细节

1. 动画流畅：务必开启 animation 选项，否则拖拽结束瞬间跳转会很生硬。
2. 视觉反馈：拖拽时要有明显的占位符（placeholder）和高亮效果，让用户知道'放哪里'。
3. 触摸支持：确保库支持 Touch Events，否则移动端用户会一脸懵。
4. 无障碍：考虑键盘操作支持，这是专业组件库的基本素养。

结语

拖拽交互不是炫技，是提升用户体验的基础设施。别再只会用原生拖拽了——用好拖拽库，你的交互会更流畅。选择合适的工具能让交互如丝般顺滑，把精力留给业务逻辑才是正道。