vue 拖拽排序实现方案

安装vue-draggable-plus包

npm install vue-draggable-plus

在页面中使用方法

<template> <VueDraggable v-model="list" :animation="300" class="flex gap-3 flex-wrap"> <div v-for="(element, idx) in list" :key="element.id" class="bg-red-200 w-20 h-40 flex flex-col items-center justify-center rounded cursor-grab active:cursor-grabbing select-none gap-1" > <span class="text-xs text-gray-500">№ {{ idx }}</span> <span class="font-semibold">{{ element.name }}</span> </div> </VueDraggable> </template> <script setup> import { VueDraggable } from 'vue-draggable-plus' const list = ref([ { id: 1, name: '叶片A' }, { id: 2, name: '叶片B' }, { id: 3, name: '叶片C' }, { id: 4, name: '叶片D' }, ]) </script>

这么写已经可以拖拽了，并且list的数组顺序也会跟随拖拽变化而变化，可以写一个监听事件，即可查看到list每次都会变化