61

0

SortableJS

适用于现代浏览器和触摸设备的可重新排序的拖放列表。

Sortable

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

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

特征

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

文章

入门

使用 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());