更多参数说明：

 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；
•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实现盒子之间相互拖拽排序,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！