功能
简单列表示例
新的Sortable(示例1{动画:150,ghostClass:'blue-background-class'});
共享列表
新的可排序项(例如2Left{group:“共享”,//将两个列表设置为同一组动画:150});新的Sortable(例如2右侧{组:“共享”,动画:150});
克隆
尝试从一个列表拖动到另一个列表。您拖动的项目将被克隆,克隆将保留在原始列表中。
新的可排序(例如3Left{组:{name:'共享',pull:'clone'//要克隆:将pull设置为'clone]},动画:150});新的Sortable(例如3Right{组:{name:'共享',拉:'克隆'},动画:150});
禁用排序
尝试对左侧的列表进行排序。这是不可能的,因为它有分类
选项设置为false。但是,您仍然可以从左侧的列表拖动到右侧的列表。
新的可排序(例如4Left{组:{name:'共享',pull:'克隆',put:false//不允许将项目放入此列表},动画:150,sort:false//禁用排序:将sort设置为false});新的Sortable(例如4Right{组:“共享”,动画:150});
把手
新的Sortable(示例5{handle:“.handle”,//句柄的类动画:150});
过滤器
尝试拖动红色背景的项目。无法完成,因为使用滤波器
选项。
新的Sortable(示例6{filter:“.filtered”,//“filterd”类不可拖动动画:150});
阈值
尝试修改以下输入以影响交换阈值。您可以看到正方形的交换区被涂成深蓝色,而“死区”(不会导致交换)被涂成浅蓝色。
新的Sortable(示例7{swap阈值:1,invertSwap:true,动画: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
).
//循环遍历每个嵌套的可排序元素for(var i=0;i<nestedSortables.length;i++){新建Sortable(嵌套Sortables[i]{group:'嵌套',动画:150,fallbackOnBody:true,swap阈值:0.65});}
插件
多重拖动
这个多重拖动该插件允许一次拖动多个项目。您可以单击以“选择”多个项目,然后将它们作为一个项目拖动。
新的Sortable(multiDragDemo{multiDrag:true,//启用多重拖动selectedClass:“selected”,//应用于所选项目的类fallbackTolerance:3,//这样我们可以在手机上选择项目动画:150});
互换
这个互换插件改变了Sortable的行为,允许项目相互交换,而不是排序。
新的Sortable(swapDemo{swap:true,//启用swap插件swapClass:'highlight',//应用于悬停掉期项目的类动画:150});
比较
j查询-UI
德拉古拉
框架支持
Vue公司
反应
角度
jQuery(jQuery)
淘汰赛
流量计
聚合物
灰烬