作为一名每天与 DOM 打交道的前端程序员。我深知在项目中实现拖拽排序功能的痛点——自己手写不仅要处理繁琐的鼠标/触摸事件，还得兼顾跨浏览器支持、移动端性能还有可维护性。直到接触到SortableJS这个轻量级且功能比较全面的库明显改变了我的拖拽实现方式。今天就从实际开发角度，带大家了解 SortableJS。并通过代码实例演示其主要用法。

SortableJS 是一款无依赖的 JavaScript 拖拽排序库。支持 PC 端和移动端，兼容所有现代浏览器，甚至包括 IE11。它的主要优势在于：

• 轻量压缩后仅 30KB 左右，不会给项目带来额外负担；
• 灵活支持列表、表格、网格等多种布局的拖拽，可自定义拖拽样式、触发条件和回调函数；
• 易用API 设计简洁，只需几行代码就能实现基础拖拽功能；
• 环境好有专门针对 Vue、React、Angular 等框架的适配版本，无缝融入现有项目。

在实际工作中。我曾用它实现过 “任务看板拖拽”“表格列顺序调整”“多列表数据迁移” 等需求，效率比手写方案提高至少%5–10倍。

二、基础使用：从一个简单列表开始

我们来看最常见的场景 —— 单列表拖拽排序。假设项目中有一个待办事项列表，需要支持拖拽调整顺序，步骤如下：

. 引入 SortableJS

有两种引入方式。可根据项目环境选择：

• CDN 引入

• NPM 安装

  npm install sortablejs --save
  # 或
  yarn add sortablejs
  

• 在 Vue/React 组件中引入：

  import Sortable from 'sortablejs';话说回来，

. 基础 HTML 结构

先创建一个简单待办列表 DOM：

完成 SortableJS 文档阅读

编写拖拽排序示例代码

测试移动端兼容性

提交代码到 GitHub

. 初始化 Sortable

只需一行主要代码即可初始化拖拽功能。再通过配置项自定义体验：

// 获取列表DOM元素
const todoList = document.getElementById;// 初始化Sortable
const sortable = new Sortable(todoList,{
// 基础配置
animation: 150,// 拖拽时的动画时长，提高视觉体验
至于handle，'.todo-item',// 拖拽触发区域
ghostClass: 'todo-item-ghost'。// 拖拽时“幽灵”元素的类名
// 回调函数：处理拖拽后的逻辑
onEnd这方面，=> {
// evt包含拖拽相关信息：
// oldIndex：元素原来的位置索引
// newIndex：元素新的位置索引
console.log;// 实际项目中，这里需要更新数据
const movedItem = todoData.splice;todoData.splice;console.log，}
});

. 自定义拖拽样式

通过 CSS 美化拖拽过程中的视觉效果：

.todo-list {
list-style: none;
padding-left: 0;width: 300px;}
.todo-item {
padding: 12px 16px;margin-bottom: 8px;background: #fff;border: 1px solid #e5e7eb;border-radius: 4px;cursor: move;不过，/* 鼠标悬浮时显示“移动”光标 */
transition: all .2s ease-in-out;}
/* 拖拽时“幽灵”元素的样式 */
.todo-item-ghost {
opacity: .6;background-color: #f3f4f6;}
/* 拖拽物体自身被选中的状态，可选 */
.todo-item.sortable-ghost {
box-shadow:
inset -4px -4px rgba。inset -4px -4px rgba;话说回来，}
.todo-item:hover {
background-color:#fafafa;}

三、进阶场景：表格拖拽与多列表交互

. 场景 ：表格列拖拽调整顺序

在数据表格中，使用者常需要自定义列的显示顺序。SortableJS 可以比较容易做到：

  
< ad>


ID 
Name 



****





场景 ：多列表之间的 drag‑drop
需要将任务从 “待办” 拖到 “进行中” 或 “已完成”。SortableJS 的 group 配置可以实现多列交互。



待办 
 

再看任务1，需求分析 





已完成 







请将上方错误内容替换为：

...





小结

如果你正在面临以下痛点


手写事件繁琐——鼠标 / touch 的细节处理耗时又容易出错；

兼容性担忧——想让 IE11+ 与主流浏览器都能正常工作；

性能瓶颈——大数据量下滚动 + drag 会卡顿；

集成成本高——想把插件无缝地植入 Vue/React/Angular 项目；


那就别再折腾自己去实现这些低层细节了！只需几行代码，你就可以拥有稳定、高效且易维护的 Drag‑and‑Drop 功能。祝编码愉快 🚀