vue.draggable.next vue3 拖拽排序
下载
js
pnpm add vuedraggable@next使用
js
<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
可用作图片上传的按钮,保持在同一行
js
<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 手柄，指定某一元素可拖拽
js
<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 拖拽动画时长
js
<template>
<draggable :list="myArray" item-key="id" :animation="2000">
<template #item="{ element }">
<div>{{ element.name }}</div>
</template>
</draggable>
</template>change 事件
js
<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>