Sortable.js 开源项目安装与使用指南

2026-01-17 09:34:50作者：柏廷章Berta

Sortable，一款高效的JavaScript库，赋予你拖拽排序的力量。无论是在单个列表间滑动还是跨列表交换，Sortable都能轻松应对，兼容触摸设备与现代浏览器（包括IE9）。无需jQuery，借助HTML5原生拖放API，实现流畅的动画效果和智能滚动。这个库设计灵活，支持多拖、CSS变换及各种框架集成，如React、Vue等，同时提供简单的API与插件系统，让自定义成为可能。无论是Web应用还是复杂界面管理，Sortable都是你实现优雅交互排序的理想选择。开始你的无痛排序之旅，体验代码与直觉的完美融合。

项目地址：https://gitcode.com/gh_mirrors/sor/Sortable

1. 项目介绍

Sortable.js 是一款现代化的拖放排序库，适用于各种浏览器以及触摸设备上的列表排序需求。无需依赖于jQuery或其他框架即可独立运行，使你的网页应用程序能够轻松实现元素的拖拽重排功能。

主要特性:

简单易用：为列表提供基础的拖放排序能力。
共享列表：允许多个列表间互相拖动排序。
克隆支持：在拖动过程中自动克隆被拖动物体。
禁用排序：可选择性地禁止某些列表进行排序操作。
嵌套列表排序：支持复杂结构的排序操作，如嵌套列表。
多插件架构：提供了丰富的插件扩展，例如MultiDrag（允许一次选取多个项）、Swap（自动交换位置）等。

2. 快速启动

首先确保您的开发环境已具备NPM或Bower的支持，接着可以通过以下命令安装Sortable.js：

安装方式一：使用NPM

npm install sortablejs --save

安装方式二：使用Bower

bower install --save sortablejs

引入并初始化

接下来，在你的项目中引入并使用Sortable.js：

// 默认导入方式
import Sortable from 'sortablejs';

// 或者按需导入核心功能，以减少文件大小
import {Sortable} from 'sortablejs/modular/sortable.core.esm.js';

然后可以在HTML页面上添加一个待排序的列表，并对其进行初始化：

<ul id="example">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

const sortable = new Sortable(document.getElementById('example'), {
    animation: 150,
});

以上步骤完成了Sortable.js的基本集成及配置，现在可以尝试通过拖放改变列表中的项顺序了。

3. 应用案例与最佳实践

共享列表间的拖放示例

<!-- 左侧列表 -->
<ul class="list" data-list="left">
    <!-- 列表项 -->
</ul>

<!-- 右侧列表 -->
<ul class="list" data-list="right">
    <!-- 列表项 -->
</ul>

document.querySelectorAll('.list').forEach(list => {
    const listId = list.dataset.list;
    let sortableOptions = {
        group: "shared", // 设置相同的组名使得两个列表间可以互相拖动
        animation: 150,
    };
    
    new Sortable(list, sortableOptions);
});

最佳实践

当涉及到复杂的嵌套式拖放时，确保fallbackOnBody选项设置为true，这有助于更流畅的动画效果；对于嵌套列表，将swapThreshold设置得较低(比如0.65)，可以更好地控制元素交换的行为。

4. 典型生态项目

jQuery版本: 针对使用jQuery的项目提供的版本。
Knockout.js版本: 整合至Knockout.js框架的适配器。
Meteor: Meteor社区的相应包装器。
Polymer: 对于基于Polymer组件的应用程序。
Ember.js: Ember社区内的整合工具。

这些生态项目体现了Sortable.js在不同前端技术栈中的广泛应用潜力，让开发者可以根据自身的项目需求灵活选择。

Sortable