vuedraggable:vuedraggable是一个易于使用且功能丰富的拖拽排序库,它为Vue 3提供了一系列的指令和组件。它支持列表和栅格布局,并且提供了许多自定义选项。
<template>
<div>
<draggable v-model="items" :options="dragOptions">
<div v-for="(item, index) in items" :key="item.id">{{ item.name }}</div>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: {
draggable,
},
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
],
dragOptions: {
animation: 200,
},
};
},
};
</script>
使用vuedraggable
组件来创建一个可拖拽的列表,v-model
绑定了排序后的数据,options
属性用于传递拖拽选项。