Sortable.js 开源项目指南

Sortable.js 开源项目指南

SortableReorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.项目地址:https://gitcode.com/gh_mirrors/so/Sortable

一、项目介绍

Sortable 是一个轻量级且强大的拖放排序库，用于在列表或网格中通过鼠标操作重新排列元素。它不仅兼容多种浏览器环境，还提供了丰富的功能选项，如连接多个列表进行统一管理、显示为网格布局、处理空列表情况等。

主要特性：

• 简化排序功能。
• 支持共享列表间元素移动。
• 元素克隆能力，在拖动时可选择是否保留原位置的元素副本。
• 可以禁用某些列表的排序功能但依然允许元素移入移出。
• 处理嵌套列表及网格结构的能力。
• 广泛支持各种框架，包括 jQuery、Knockout、Meteor、Polymer 和 Ember 等。

二、项目快速启动

为了能够开始使用 Sortable.js，我们首先需要将其安装到我们的项目中。

安装

你可以通过以下几种方式之一来安装 Sortable:

使用 NPM:

npm install sortablejs --save

使用 Bower:

bower install --save sortablejs

直接引入 CDN 链接（适用于非打包环境）

<script src="https://cdnjs.cloudflare.com/ajax/libs/sortablejs/1.15.0/Sortable.min.js"></script>

引入并配置

import Sortable from 'sortablejs';

// 初始化一个可拖拽排序的列表
const el = document.getElementById('example');
new Sortable(el, {
    animation: 150,
    ghostClass: 'blue-background-class'
});

上面的例子展示了如何初始化 Sortable 的基本使用方法。我们可以将任意 id=example 的元素设置成可拖拽排序的状态，其中 animation 控制动画持续时间，ghostClass 设置元素被拖拽时的样式类。

三、应用案例和最佳实践

实例展示

示例一： 默认功能演示

// 默认 Sortable 功能实现
import Sortable from 'sortablejs';
let el = document.getElementById('example-list');
new Sortable(el, { animation: 150 });

这段代码使得ID为example-list的元素成为了一个可拖动排序的列表，动画效果设置为150毫秒。

示例二： 连接两个列表使之可以相互交换元素

// 共享列表功能实现
let elLeft = document.getElementById('list-left'),
    elRight = document.getElementById('list-right');

new Sortable(elLeft, {
    group: 'shared',
    animation: 150
});

new Sortable(elRight, {
    group: 'shared',
    animation: 150
});

通过设定group属性为相同的值，实现了两个列表间的元素互相拖动。

最佳实践

• 在使用动画时，对于嵌套排序建议设置 fallbackOnBody 为 true 来增强表现力。
• 设置 swapThreshold 低于默认值 1，比如 0.65，能优化多选换位体验。
• 当不希望某个列表开启内部排序但是保持与其他列表的交互性时，应将该列表的 sort 属性设为 false，而仅控制 pull 或 put 参数即可。

四、典型生态项目

Sortable 不仅自身强大，而且已广泛集成于许多流行前端框架和技术栈中，例如：

• jQuery: 作为 jQuery UI 中的一个插件，提供拖放功能。
• Vue.js: vue-sortable 组件使其在 Vue 应用程序中的使用更为便捷。
• React: react-sortable-hoc 提供了高阶组件支持 React 应用中的排序功能。
• Angular: ng2-dnd 规模较大地支持 Angular 应用中拖拽排序需求。

以上提及的这些框架通常都会遵循 Sortable 的核心逻辑以及事件系统，方便开发者无需额外学习成本就能利用其丰富功能。

---

通过上述介绍和实例，我们了解到了 Sortable.js 的主要功能及其应用场景，相信这将有助于你在实际开发工作中更好地运用这一工具。

SortableReorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.项目地址:https://gitcode.com/gh_mirrors/so/Sortable