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

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

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项目地址:https://gitcode.com/gh_mirrors/sor/Sortable