<draggable>
是一个Vue组件,它提供了拖拽排序功能。通过使用 <draggable>
组件,你可以实现将列表中的项进行拖拽排序的效果。
下面是一个基本的示例:
<template>
<div>
<draggable v-model="list">
<div v-for="(item, index) in list" :key="index">{{ item }}</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable
},
data() {
return {
list: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
}
}
}
</script>
在上述示例中,我们使用 <draggable>
组件包裹了一个包含多个 <div>
元素的列表。每个 <div>
元素代表一个列表项,并通过 v-for
指令循环渲染。
通过 v-model
属性将 list
数组与 <draggable>
组件进行双向绑定,这样当用户拖拽排序列表项时,list
数组会自动更新。
<draggable>
组件还可以接收许多其他属性和事件来自定义和监听拖拽行为。你可以在官方文档中查看更多详细信息:vuedraggable