vuedraggable 选项介绍

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

  

• group
  配置拖拽分组。多个列表可以共享同一个分组，允许它们之间的项目相互拖拽。
  group: { name: 'shared', // 分组的名称 pull: 'clone', // 是否允许拖拽项从该列表中被拖出 put: true // 是否允许从其他列表中拖拽项放入此列表 }
  
  
  
  • name: 用于标识该拖拽组，其他列表可以通过相同的名称与之共享。
    
  • pull: 指定当前列表是否允许拖拽项从列表中移除。可选值有：
    
    
    
    • 'clone': 允许拖拽项被克隆并拖出列表。
      
    • true: 允许拖拽项被移除。
      
    • false: 禁止移除。
      
    
    
  • put: 指定是否允许将其他列表中的项拖入当前列表。默以为 true，体现允许拖入。
    
  
  
• disabled
  禁用拖拽功能。
  disabled: true // 禁用拖拽
  
• animation
  设置拖拽项在排序时的动画效果，单元为毫秒。
  animation: 150 // 150ms的动画时间
  
• handle
  配置拖拽的句柄。只有指定的元素可以被拖动，别的部分将无法进行拖拽。
  handle: '.drag-handle' // 拖拽句柄的CSS类名
  
• delay
  设置拖拽延迟，单元为毫秒。在拖拽开始之前，拖动元素必要等待指定的时间（比方，避免误触发）。
  delay: 200 // 200ms延迟后才华开始拖拽
  
• forceFallback
  强制使用浏览器原生的拖拽 API。通常用于某些浏览器不支持 HTML5 拖拽 API 大概自定义拖拽的场景。
  forceFallback: true // 强制启用备用拖拽
  
• fallbackClass
  指定一个 CSS 类，用于设置拖拽项在拖拽时的样式。这个类会在元素开始拖拽时被添加到元素上，竣事拖拽时移除。
  fallbackClass: 'dragging' // 拖拽时添加的 CSS 类
  
• fallbackOnBody
  设置为 true 时，拖拽元素会被附加到 body 元素上，而不是拖拽元素的父级容器。这样可以避免拖拽元素被父容器的样式限定。
  fallbackOnBody: true // 将拖拽项附加到body
  
• swap
  启用交换排序模式，在拖拽时替换被拖拽项和目标位置的项。适用于必要交换元素顺序的场景。
  swap: true // 启用交换排序
  
• removeOnSpill
  如果拖拽项被拖拽到一个不支持该项放置的区域，它将被移除。用于防止拖拽项被放置到无效区域。
  removeOnSpill: true // 拖拽项放置到无效区域时移除
  
• direction
  设置拖拽的方向，horizontal 或 vertical。默认环境下，vuedraggable 会根据容器的分列方向自动决定拖拽方向。
  direction: 'horizontal' // 设置为程度拖拽
  
• dragClass
  设置一个 CSS 类，当拖拽项正在拖拽时，这个类会被添加到拖拽项上。通常用于给拖拽项添加样式厘革。
  dragClass: 'dragging' // 拖拽项添加的 CSS 类
  
• setData
  用于指定拖拽过程中可以设置的自定义数据，默认环境下是 text/plain。
  setData: (evt, data) => { // 可以自定义拖拽时通报的数据 data.someProperty = 'value'; }
  
• ghostClass
  设置一个 CSS 类，这个类会在拖拽项被拖动时应用到该元素的占位符上（通常是拖拽元素透明版）。
  ghostClass: 'ghost' // 拖拽时设置的透明占位符类
  
• chosenClass
  设置一个 CSS 类，这个类会在拖拽项被选中时应用。通常用于添加选择项的样式。
  chosenClass: 'chosen' // 选中项的 CSS 类
  
• onStart
  当拖拽开始时触发的回调函数。传入一个变乱对象，包含拖拽的详细信息。
  onStart: (evt) => { console.log('Drag started', evt); }
  
• onEnd
  当拖拽竣事时触发的回调函数，传入一个变乱对象。可以在此时获取终极的拖拽效果。
  onEnd: (evt) => { console.log('Drag ended', evt); }
  
• onUpdate
  当拖拽过程中，元素排序更新时触发。适用于动态更新数据。
  onUpdate: (evt) => { console.log('List updated', evt); }
  
• onAdd
  当一个项被添加到列表时触发。通常用于动态添加项的场景。
  onAdd: (evt) => { console.log('Item added', evt); }
  
• onRemove
  当一个项被从列表中移除时触发。适用于删除或移除项的场景。
  onRemove: (evt) => { console.log('Item removed', evt); }
  

  示例：完备配置

1. <template>
2. <draggable v-model="items" :options="dragOptions" @start="onDragStart" @end="onDragEnd" >
3. <div v-for="(item, index) in items" :key="index">{{ item }}</div>
4. </draggable>
5. </template>
6. <script>
7. import draggable from "vuedraggable";
8. export default {
9. components: { draggable, },
10. data() {
11. 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, }, }; },
12. methods: {
13. onDragStart(evt) { console.log("Drag started", evt); },
14. onDragEnd(evt) { console.log("Drag ended", evt); }, }, };
15. </script>
16. <style scoped>
17. .drag-handle { cursor: move; padding: 5px; background-color: #ccc; border-radius: 5px; } </style>

复制代码

总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。