vue3拖拽排序 使用 vuedraggable

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>