如何使用vue-smooth-dnd

Vue Smooth DnD是一个基于Vue的平滑易用的拖放库。它提供了简单易用的API和可自定义的样式。

要使用Vue Smooth DnD，可以按照以下步骤进行操作：

1. 安装Vue Smooth DnD

npm install vue-smooth-dnd --save

1. 在组件中引入Vue Smooth DnD

import VueSmoothDnD from 'vue-smooth-dnd'

1. 在组件的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');}
}