在GitHub上叉我

可排序JS

用于重新排序拖放列表的JavaScript库

功能


简单列表示例

第1项
项目2
项目3
项目4
项目5
项目6
新的Sortable(示例1{动画:150,ghostClass:'blue-background-class'});

共享列表

第1项
项目2
项目3
项目4
项目5
项目6
第1项
项目2
项目3
项目4
项目5
项目6
新的可排序项(例如2Left{group:“共享”,//将两个列表设置为同一组动画:150});新的Sortable(例如2右侧{组:“共享”,动画:150});

克隆

尝试从一个列表拖动到另一个列表。您拖动的项目将被克隆,克隆将保留在原始列表中。

第1项
项目2
项目3
项目4
项目5
项目6
第1项
项目2
项目3
项目4
项目5
项目6
新的可排序(例如3Left{组:{name:'共享',pull:'clone'//要克隆:将pull设置为'clone]},动画:150});新的Sortable(例如3Right{组:{name:'共享',拉:'克隆'},动画:150});

禁用排序

尝试对左侧的列表进行排序。这是不可能的,因为它有分类选项设置为false。但是,您仍然可以从左侧的列表拖动到右侧的列表。

第1项
项目2
项目3
项目4
项目5
项目6
第1项
项目2
项目3
项目4
项目5
项目6
新的可排序(例如4Left{组:{name:'共享',pull:'克隆',put:false//不允许将项目放入此列表},动画:150,sort:false//禁用排序:将sort设置为false});新的Sortable(例如4Right{组:“共享”,动画:150});

把手

第1项
项目2
项目3
项目4
项目5
项目6
新的Sortable(示例5{handle:“.handle”,//句柄的类动画:150});

过滤器

尝试拖动红色背景的项目。无法完成,因为使用滤波器选项。

第1项
项目2
项目3
已筛选
项目4
项目5
新的Sortable(示例6{filter:“.filtered”,//“filterd”类不可拖动动画:150});

阈值

尝试修改以下输入以影响交换阈值。您可以看到正方形的交换区被涂成深蓝色,而“死区”(不会导致交换)被涂成浅蓝色。

1
2
反向交换
新的Sortable(示例7{swap阈值:1,动画:150});

示例


网格示例

第1项
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15
项目16
项目17
项目18
项目19
项目20

嵌套可排序项示例

注意:将嵌套排序表与动画一起使用时,建议正文上的回退选项设置为true。
还始终建议反转交换选项设置为true,或swap阈值选项低于默认值1(例如0.65).

第1.1项
第2.1项
第2.2项
第3.1项
第3.2项
第3.3项
第3.4项
第2.3项
第2.4项
项目1.2
第1.3项
第1.4项
第2.1项
第2.2项
第2.3项
第2.4项
第1.5项
//循环遍历每个嵌套的可排序元素for(var i=0;i<nestedSortables.length;i++){新建Sortable(嵌套Sortables[i]{group:'嵌套',动画:150,fallbackOnBody:true,swap阈值:0.65});}

插件


多重拖动

这个多重拖动该插件允许一次拖动多个项目。您可以单击以“选择”多个项目,然后将它们作为一个项目拖动。

第1项
项目2
项目3
项目4
项目5
项目6
新的Sortable(multiDragDemo{multiDrag:true,//启用多重拖动selectedClass:“selected”,//应用于所选项目的类fallbackTolerance:3,//这样我们可以在手机上选择项目动画:150});

互换

这个互换插件改变了Sortable的行为,允许项目相互交换,而不是排序。

第1项
项目2
项目3
项目4
项目5
项目6
新的Sortable(swapDemo{swap:true,//启用swap插件swapClass:'highlight',//应用于悬停掉期项目的类动画:150});

比较


j查询-UI

德拉古拉

框架支持


Vue公司

Vue(星期五)。拖动

反应

react-sortablejs

角度

ngx-sortablejs

jQuery(jQuery)

jquery-sortablejs

淘汰赛

淘汰赛-便携式js

流量计

流星便携式

聚合物

聚合物-便携式

灰烬

成员可排序js