vue3拖拽排序 使用 vuedraggable

vue.draggable.next vue3 拖拽排序

vue.draggable.next

下载

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>
相关推荐
coding随想34 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB242 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦8 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子10 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录11 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20911 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode11 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript