Sortable

Sortable 是一个用于可重新排序的拖放列表的 JavaScript 库。

演示：http ://sortablejs.github.io/Sortable/

特征

• 支持触控设备和现代浏览器（包括 IE9）
• 可以从一个列表拖动到另一个列表或在同一个列表中
• 移动项目时的 CSS 动画
• 支持拖动句柄 和可选文本 （比 voidberg 的 html5sortable 更好）
• 智能自动滚动
• 高级交换检测
• 流畅的动画
• 多拖支持
• 支持 CSS 转换
• 使用原生 HTML5 拖放 API 构建
• 支持
  • meteor
  • angular
    • 2.0+
    • 1.*
  • react
    • ES2015+
    • Mixin
  • knockout
  • polymer
  • Vue
  • ember
• 支持任何 CSS 库，例如Bootstrap
• 简单的 API
• 插件支持
• 内容分发网络
• 不需要 jQuery（但有支持）
• Typescript定义在 @types/sortablejs

文章

• 在 Sortable 中拖动多个项目（2019 年 4 月 26 日）
• 交换阈值和方向（2018 年 12 月 2 日）
• Sortable v1.0 — 新功能（2014 年 12 月 22 日）
• 借助 HTML5 Drag'n'Drop API 进行排序（2013 年 12 月 23 日）

入门

使用 NPM 安装：

$ npm install sortablejs --save

使用 Bower 安装：

$ bower install --save sortablejs

导入您的项目：

// Default SortableJS
import Sortable from 'sortablejs';

// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';

// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';

Cherrypick 插件：

// Cherrypick extra plugins
import Sortable, { MultiDrag, Swap } from 'sortablejs';

Sortable.mount(new MultiDrag(), new Swap());


// Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';

Sortable.mount(new AutoScroll());