vuedraggable 选项介绍

vuedraggable 是基于 SortableJS 的 Vue 组件，提供了丰富的选项来定制拖拽行为。以下是 vuedraggable 常用的选项和它们的详细说明：

常用选项介绍

1. group
   配置拖拽分组。多个列表可以共享同一个分组，允许它们之间的项目互相拖拽。

   group: { name: 'shared', // 分组的名称 pull: 'clone', // 是否允许拖拽项从该列表中被拖出 put: true // 是否允许从其他列表中拖拽项放入此列表 }
   • name: 用于标识该拖拽组，其他列表可以通过相同的名称与之共享。
   • pull: 指定当前列表是否允许拖拽项从列表中移除。可选值有：
     • 'clone': 允许拖拽项被克隆并拖出列表。
     • true: 允许拖拽项被移除。
     • false: 禁止移除。
   • put: 指定是否允许将其他列表中的项拖入当前列表。默认为 true，表示允许拖入。

2. disabled
   禁用拖拽功能。

   disabled: true // 禁用拖拽

3. animation
   设置拖拽项在排序时的动画效果，单位为毫秒。

   animation: 150 // 150ms的动画时间

4. handle
   配置拖拽的句柄。只有指定的元素可以被拖动，其它部分将无法进行拖拽。

   handle: '.drag-handle' // 拖拽句柄的CSS类名

5. delay
   设置拖拽延迟，单位为毫秒。在拖拽开始之前，拖动元素需要等待指定的时间（例如，避免误触发）。

   delay: 200 // 200ms延迟后才能开始拖拽

6. forceFallback
   强制使用浏览器原生的拖拽 API。通常用于某些浏览器不支持 HTML5 拖拽 API 或者自定义拖拽的场景。

   forceFallback: true // 强制启用备用拖拽

7. fallbackClass
   指定一个 CSS 类，用于设置拖拽项在拖拽时的样式。这个类会在元素开始拖拽时被添加到元素上，结束拖拽时移除。

   fallbackClass: 'dragging' // 拖拽时添加的 CSS 类

8. fallbackOnBody
   设置为 true 时，拖拽元素会被附加到 body 元素上，而不是拖拽元素的父级容器。这样可以避免拖拽元素被父容器的样式限制。

   fallbackOnBody: true // 将拖拽项附加到body

9. swap
   启用交换排序模式，在拖拽时替换被拖拽项和目标位置的项。适用于需要交换元素顺序的场景。

   swap: true // 启用交换排序

10. removeOnSpill
    如果拖拽项被拖拽到一个不支持该项放置的区域，它将被移除。用于防止拖拽项被放置到无效区域。

    removeOnSpill: true // 拖拽项放置到无效区域时移除

11. direction
    设置拖拽的方向，horizontal 或 vertical。默认情况下，vuedraggable 会根据容器的排列方向自动决定拖拽方向。

    direction: 'horizontal' // 设置为水平拖拽

12. dragClass
    设置一个 CSS 类，当拖拽项正在拖拽时，这个类会被添加到拖拽项上。通常用于给拖拽项添加样式变化。

    dragClass: 'dragging' // 拖拽项添加的 CSS 类

13. setData
    用于指定拖拽过程中可以设置的自定义数据，默认情况下是 text/plain。

    setData: (evt, data) => { // 可以自定义拖拽时传递的数据 data.someProperty = 'value'; }

14. ghostClass
    设置一个 CSS 类，这个类会在拖拽项被拖动时应用到该元素的占位符上（通常是拖拽元素透明版）。

    ghostClass: 'ghost' // 拖拽时设置的透明占位符类

15. chosenClass
    设置一个 CSS 类，这个类会在拖拽项被选中时应用。通常用于添加选择项的样式。

    chosenClass: 'chosen' // 选中项的 CSS 类

16. onStart
    当拖拽开始时触发的回调函数。传入一个事件对象，包含拖拽的详细信息。

    onStart: (evt) => { console.log('Drag started', evt); }

17. onEnd
    当拖拽结束时触发的回调函数，传入一个事件对象。可以在此时获取最终的拖拽结果。

    onEnd: (evt) => { console.log('Drag ended', evt); }

18. onUpdate
    当拖拽过程中，元素排序更新时触发。适用于动态更新数据。

    onUpdate: (evt) => { console.log('List updated', evt); }

19. onAdd
    当一个项被添加到列表时触发。通常用于动态添加项的场景。

    onAdd: (evt) => { console.log('Item added', evt); }

20. onRemove
    当一个项被从列表中移除时触发。适用于删除或移除项的场景。

    onRemove: (evt) => { console.log('Item removed', evt); }

示例：完整配置

<template> 
<draggable v-model="items" :options="dragOptions" @start="onDragStart" @end="onDragEnd" > 
<div v-for="(item, index) in items" :key="index">{{ item }}</div> 
</draggable> 
</template><script>import draggable from "vuedraggable";export default { 
components: { draggable, }, 
data() { 
return { items: ["Item 1", "Item 2", "Item 3", "Item 4"], dragOptions: { group: { name: "shared", pull: "clone", put: true }, animation: 200, handle: ".drag-handle", disabled: false, }, }; }, 
methods: { 
onDragStart(evt) { console.log("Drag started", evt); }, 
onDragEnd(evt) { console.log("Drag ended", evt); }, }, }; 
</script><style scoped> 
.drag-handle { cursor: move; padding: 5px; background-color: #ccc; border-radius: 5px; } </style>

总结

通过 vuedraggable 提供的各种选项，你可以非常灵活地控制拖拽行为，包括禁用拖拽、定制拖拽手柄、设置动画效果、支持多列拖拽等。选项的丰富性使得它能够满足大多数应用场景的需求。