vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

2020-06-14 06:27:18易采站长站整理

                   ‘clone’:列表单元移出,移动的为该元素的副本;
                   function:用来进行pull的函数判断,可以进行复杂逻辑,在函数中return false/true来判断是否移出;
               put:put用来定义往这个列表容器放置列表单元的的设置,true/false/[‘foo’,’bar’]/function
                   true:列表容器可以从其他列表容器内放入列表单元;
                   false:与true相反;
                   [‘foo’,’bar’]:这个可以是一个字符串或者是字符串的数组,代表的是group配置项里定义的name值;
                   function:用来进行put的函数判断,可以进行复杂逻辑,在函数中return false/true来判断是否放入;

更多参数说明:


group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }

•sort:boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序;
•delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间;
•disabled:boolean 定义是否此sortable对象是否可用,为true时sortable对象不能拖放排序等功能,为false时为可以进行排序,相当于一个开关;
•animation:number 单位:ms,定义排序动画的时间;
•handle:selector 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动;
•filter:selector 格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用“,”分隔;
•draggable:selector 格式为简单css选择器的字符串,定义哪些列表单元可以进行拖放
•ghostClass:selector 格式为简单css选择器的字符串,当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况,此配置项就是来给这个影子单元添加一个class,我们可以通过这种方式来给影子元素进行编辑样式;
•chosenClass:selector 格式为简单css选择器的字符串,当选中列表单元时会给该单元增加一个class;