Vue Smooth DnD是一个基于Vue的平滑易用的拖放库。它提供了简单易用的API和可自定义的样式。
要使用Vue Smooth DnD，可以按照以下步骤进行操作：
- 安装Vue Smooth DnD
npm install vue-smooth-dnd --save- 在组件中引入Vue Smooth DnD
import VueSmoothDnD from 'vue-smooth-dnd'- 在组件的template中使用
<template><VueSmoothDnD:droppable="true":animated="true":drop-animation-duration="300":container-id="'container'"@drop="onDrop"@drag-start="onDragStart"@drag-end="onDragEnd":drop-zone-selector=".drop-zone"><div v-for="(item, index) in items" :key="index" class="item">{{ item }}</div></VueSmoothDnD>
</template>
在这个例子中，我们使用了Vue Smooth DnD组件，并传入了一些属性和事件。
-
droppable: 表示容器是否可以接收拖动的元素。 -
animated: 表示在拖动时是否启用动画效果。 -
drop-animation-duration: 拖动结束后的动画持续时间。 -
container-id: 容器的ID，可以用来在多个容器之间进行拖动。 -
@drop: 当元素被拖动到容器中时触发的事件。 -
@drag-start: 当拖动开始时触发的事件。 -
@drag-end: 当拖动结束时触发的事件。 -
drop-zone-selector: 可以用来指定容器内的特定元素作为拖放区域。
除了上面的属性和事件之外，Vue Smooth DnD还提供了一些其他的属性和事件，可以在官方文档中查看。
最后，需要在组件中实现onDrop、onDragStart和onDragEnd方法。这些方法将在Vue Smooth DnD拖动事件期间被调用，以响应不同的事件。
methods: {onDrop(dropResult) {console.log(dropResult.removedIndex, dropResult.addedIndex, dropResult.payload);},onDragStart() {console.log('drag started');},onDragEnd() {console.log('drag ended');}
}
