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

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

•forceFallback:boolean 如果设置为true时,将不使用原生的html5的拖放,可以修改一些拖放中元素的样式等;
•fallbackClass:string 当forceFallback设置为true时,拖放过程中鼠标附着单元的样式;
•scroll:boolean 默认为true,当排序的容器是个可滚动的区域,拖放可以引起区域滚动

    事件:

•onChoose:function 列表单元被选中的回调函数
•onStart:function 列表单元拖动开始的回调函数
•onEnd:function 列表单元拖放结束后的回调函数
•onAdd:function 列表单元添加到本列表容器的回调函数
•onUpdate:function 列表单元在列表容器中的排序发生变化后的回调函数
•onRemove:function 列表元素移到另一个列表容器的回调函数
•onFilter:function 试图选中一个被filter过滤的列表单元的回调函数
•onMove:function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
•onClone:function 当创建一个列表单元副本的时候的回调函数

   事件对象:

   事件对象在各个函数中略有不同,可通过输出对象查看对象的属性,下面简单列举几个:

•to:HTMLElement–移动到列表容器
•from:HTMLElement–来源的列表容器
•item:HTMLElement–被移动的列表单元
•clone:HTMLElement–副本的列表单元
•oldIndex:number/undefined–在列表容器中的原序号
•newIndex:number/undefined–在列表容器中的新序号

——————————————————————————–

      方法

◦option(name[,value])
获得或者设置项参数,使用方法类似于jQuery用法,没有第二个参数为获得option中第一个参数所对应的值,有第二个参数时,将重新赋给第一个参数所对应的值;
◦closest
没理解
◦toArray()
序列化可排序的列表单元的data-id(可通过配置项中dataIdAttr修改)放入一个数组,并返回这个数组中
◦sort()
通过自定义列表单元的data-id的数组对列表单元进行排序
◦save()
◦destroy()

总结

以上所述是小编给大家介绍的vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!