sortablejs vue3（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，用户界面的交互体验是衡量应用质量的重要指标之一。无论是待办事项列表的拖拽排序，还是仪表盘组件的自由排列，sortablejs vue3 的组合为开发者提供了高效实现可排序功能的解决方案。本文将从零开始，通过循序渐进的方式讲解如何在 Vue3 项目中集成和使用 SortableJS，帮助开发者快速构建直观的交互功能。

一、SortableJS 与 Vue3 的核心概念

1.1 SortableJS 的基本原理

SortableJS 是一个轻量级的 JavaScript 库，专门用于实现元素的拖拽排序功能。其核心思想是通过监听 mousedown、mousemove 等事件，动态调整 DOM 元素的位置。类比为“物理世界的积木游戏”，开发者只需定义可拖拽的容器和规则，即可让界面元素像积木一样自由移动。

1.2 Vue3 的响应式系统

Vue3 的响应式系统通过 Proxy 对象实现数据与视图的双向绑定。当数据发生变更时，Vue3 能够自动更新视图，这一特性与 SortableJS 的拖拽操作天然契合。两者结合后，拖拽动作会自动触发数据更新，无需手动同步状态。

1.3 技术优势对比

二、环境搭建与基础配置

2.1 安装依赖

在 Vue3 项目中，通过 npm 或 yarn 安装 SortableJS：

npm install sortablejs --save  

或

yarn add sortablejs  

2.2 创建基础组件

以一个待办事项列表为例，创建 TodoList.vue 组件：

<template>  
  <div class="todo-list">  
    <div  
      v-for="(item, index) in items"  
      :key="item.id"  
      class="todo-item"  
    >  
      {{ item.text }}  
    </div>  
  </div>  
</template>  

<script setup>  
import { ref } from 'vue';  

const items = ref([  
  { id: 1, text: '任务1' },  
  { id: 2, text: '任务2' },  
  // ...更多任务  
]);  
</script>  

2.3 初始化 Sortable 实例

在 <script setup> 中引入并配置 SortableJS：

import Sortable from 'sortablejs';  

// 确保 DOM 已渲染  
const todoListRef = ref(null);  

onMounted(() => {  
  new Sortable(todoListRef.value, {  
    animation: 150, // 拖拽动画时长  
    onEnd: (evt) => {  
      // 更新数据源  
      const [removed] = items.value.splice(evt.oldIndex, 1);  
      items.value.splice(evt.newIndex, 0, removed);  
    },  
  });  
});  

三、核心功能详解与实战案例

3.1 数据与视图的同步机制

当用户拖拽元素时，SortableJS 的 onEnd 回调会捕获新旧索引值。通过 Vue3 的响应式 items.value 数组，开发者可以快速更新数据：

// 关键逻辑：通过 splice 实现数组元素的移动  
items.value.splice(evt.newIndex, 0,  
  items.value.splice(evt.oldIndex, 1)[0]  
);  

这一操作类比“剪切+粘贴”，确保数据与视图完全同步。

3.2 自定义拖拽规则

3.2.1 禁用特定元素拖拽

通过 filter 配置项，可排除某些元素：

new Sortable(listEl, {  
  filter: '.disabled-item', // 禁用带有 disabled-item 类的元素  
});  

3.2.2 限制拖拽范围

若需跨容器拖拽，可启用 group 属性：

// 在两个容器上配置相同的 group 名称  
new Sortable(containerA, { group: 'shared-group' });  
new Sortable(containerB, { group: 'shared-group' });  

3.3 高级功能：动画与自定义样式

通过 CSS 过渡和 Sortable 的 animation 参数，可实现平滑的拖拽效果：

.todo-item {  
  transition: all 0.3s ease;  
  will-change: transform;  
}  

同时，在 onMove 回调中动态调整元素样式：

onMove: (evt) => {  
  evt.dragged.style.backgroundColor = '#f0f0f0';  
},  

四、进阶技巧与性能优化

4.1 处理大数据量场景

当列表包含数百条数据时，直接操作 DOM 可能引发性能问题。此时可结合 Virtual Scroll 技术，仅渲染可视区域内的元素：

<template>  
  <div ref="virtualList" class="virtual-list">  
    <div  
      v-for="item in visibleItems"  
      :key="item.id"  
      :style="{ top: getItemPosition(item) }"  
    >  
      {{ item.text }}  
    </div>  
  </div>  
</template>  

<script setup>  
// 计算可视区域内的元素  
const visibleItems = computed(() => {  
  const startIndex = Math.floor(scrollY / itemHeight);  
  return items.value.slice(startIndex, startIndex + 10);  
});  
</script>  

4.2 防止事件冲突

若页面存在其他拖拽库或自定义事件，可通过 ghostClass 和 dragClass 避免样式冲突：

new Sortable(el, {  
  ghostClass: 'sortable-ghost', // 拖拽占位符样式  
  dragClass: 'sortable-drag',   // 拖拽元素样式  
});  

4.3 服务端数据同步

在 onUpdate 回调中发送排序后的数据到后端：

onEnd: (evt) => {  
  const sortedIds = items.value.map(item => item.id);  
  // 发送排序后的 ID 列表  
  fetch('/api/save-order', { method: 'POST', body: sortedIds });  
},  

五、常见问题与解决方案

5.1 初始渲染后 Sortable 未生效

原因：DOM 未完全渲染即初始化 Sortable。
解决：使用 Vue3 的 onMounted 生命周期钩子。

5.2 拖拽时数据未更新

原因：未正确绑定响应式数据或未使用 Vue3 的 splice 方法。
解决：确保数据是 ref 或 reactive 对象，并通过数组变异方法更新。

5.3 多容器拖拽时数据混乱

原因：未正确管理不同容器的数据源。
解决：为每个容器绑定独立的 items 数组，并通过 onAdd 和 onRemove 回调同步数据。

六、结论

通过本文的讲解，开发者可以掌握 sortablejs vue3 的核心用法，并通过实际案例理解其响应式数据绑定的实现逻辑。从基础的单列表排序到跨容器拖拽、大数据优化，SortableJS 与 Vue3 的组合为开发者提供了灵活且高效的解决方案。随着对事件回调和配置参数的深入探索，开发者甚至可以构建出支持自定义动画、权限控制的复杂交互场景。

未来，随着 Vue3 的 Composition API 和 TypeScript 的普及，开发者可以进一步结合类型注解、组合式函数等特性，将 SortableJS 的集成封装为可复用的插件，从而提升团队开发效率。