SortableJS 开源项目教程

SortableJS 开源项目教程

sortableA sortable component built with shadcn/ui, radix ui, and dnd-kit.项目地址:https://gitcode.com/gh_mirrors/sortabl/sortable

项目介绍

SortableJS 是一个强大的JavaScript库，专为可重新排序的拖放列表设计。它支持现代浏览器（包括IE9）以及触摸设备，提供从一个列表到另一个或在同一列表内部拖放的功能。这个库利用原生HTML5拖放API，并具有CSS动画效果、智能自动滚动、高级交换检测、平滑动画、多选拖拽等特性。此外，SortableJS无缝集成了Meteor、Angular 2.0+、React、Knockout、Polymer、Vue、Ember等框架，并兼容任何CSS库，如Bootstrap。其简洁的API设计和对localStorage的支持使其在前端开发中非常受欢迎。

项目快速启动

要快速开始使用SortableJS，首先通过npm安装它：

npm install sortablejs --save

接着，在你的项目中引入Sortable：

import Sortable from 'sortablejs';

// 简单列表示例
const list = document.getElementById('simpleList');
new Sortable(list, {
    animation: 150,
});

HTML结构示例：

<ul id="simpleList">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

应用案例和最佳实践

共享列表

如果你希望两个列表可以共享拖放项，你可以设置相同组名：

const listLeft = document.getElementById('list-left');
const listRight = document.getElementById('list-right');

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

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

禁止排序但允许拖出

禁用特定列表的排序功能，但仍允许拖动元素到其他列表：

new Sortable(document.getElementById('noSort'), {
    group: 'special',
    sort: false, // 关闭排序功能
    pull: true, // 可以拖出
});

典型生态项目

SortableJS因其灵活和强大而被广泛应用于各种框架和库之中，以下是一些典型的集成场景：

• Vue: 使用vue-draggable进行Vue应用中的拖放处理。
• React: 可通过react-sortablejs轻松集成到React组件中。
• Angular: 使用ngx-sortablejs作为Angular项目中的拖放解决方案。
• jQuery: 对于仍然使用jQuery的项目，可以通过jquery-sortablejs添加拖放功能。
• 更多框架如Ember、Knockout、Polymer等都有相应的适配方案，这使得SortableJS成为一个高度可集成的工具，在不同技术栈之间游刃有余。

在集成这些生态项目时，通常需要根据相应框架的规范来导入和配置SortableJS，具体实现细节需参考各框架的官方文档和插件说明。

通过以上步骤和示例，你已经能够快速上手并深入理解SortableJS的使用。无论是简单列表的排序还是复杂的交互场景，SortableJS都能提供强大的支持。

sortableA sortable component built with shadcn/ui, radix ui, and dnd-kit.项目地址:https://gitcode.com/gh_mirrors/sortabl/sortable