如果想要实现元素可以自由拖动排序,可用插件:vuedraggable
下载:yarn add vuedraggable
使用:在要拖动的元素外添加一下标签:
需要注意的是:transition-group标签的第一个子元素必须是div
<draggable
v-if="isShowBtn"
class="channel-content"
animation="1000"
@end="handleDragEnd"
v-model="textData"
>
<transition-group>
<div class="channelList" v-for="(v, i) in textData" :key="v">
{{ v }}
<van-image
v-if="isShowBtn"
@click="deleteChannel(v, i)"
:src="require('@/assets/img/icon-cross-simple.png')"
/>
</div>
</transition-group>
</draggable>
textData
是一个数组,表示需要拖动和排序的元素列表。通过 v-model
将 textData
与 draggable
组件绑定,以便在拖拽和排序时自动更新列表handleDragEnd
是拖动后的api,可做拖动后的处理animation
属性用于设置拖动元素时的动画过渡效果的持续时间。它指定了从一个位置到另一个位置的过渡所需的时间(以毫秒为单位)