vue.draggable.next vue3 拖拽排序

vue.draggable.next

下载

pnpm add vuedraggable@next

使用

<script lang="ts" setup>
import { reactive } from "vue";
import draggable from "vuedraggable";const list = reactive([{id: 1,name: "zs",},{id: 2,name: "ls",},{id: 3,name: "xr",},
]);
</script><template><draggable :list="list" item-key="id"><template #item="{ element }"><div>{{ element.name }}</div></template></draggable>
</template><style lang="scss" scoped></style>

slot 其他插槽

Header/Footer

可用作图片上传的按钮,保持在同一行

<template><draggable :list="list" item-key="id"><template #header><button>Add</button></template><template #item="{ element }"><div>{{ element.name }}</div></template><template #Footer><button>Add</button></template></draggable>
</template>

handle 手柄，指定某一元素可拖拽

<template><draggable :list="myArray" item-key="id" handle=".handle"><template #item="{ element, index }"><div><span class="handle">点我拖动</span><span class="px-20px">{{ element.name }}</span><span @click="handleDelete(index)">X</span></div></template></draggable>
</template>

animation 拖拽动画时长

<template><draggable :list="myArray" item-key="id" :animation="2000"><template #item="{ element }"><div>{{ element.name }}</div></template></draggable>
</template>

change 事件

<script lang="ts" setup>
import { reactive } from "vue";
import draggable from "vuedraggable";
interface List {id: number;name: string;
}
const list: List[] = reactive([{id: 1,name: "zs",},{id: 2,name: "ls",},{id: 3,name: "xr",},
]);function onChange(e: { moved: { element: List; newIndex: number; oldIndex: number } }) {console.log("拖拽元素", e.moved.element);console.log("拖拽元素后索引", e.moved.newIndex);console.log("拖拽元素前索引", e.moved.oldIndex);
}
</script><template><draggable :list="list" item-key="id" @change="onChange"><template #item="{ element }"><div>{{ element.name }}</div></template></draggable>
</template><style lang="scss" scoped></style>