Vue3:拖拽功能（可用于from，table）

在一些项目中，可能需要做一些定制化开发，比如：from表单中，可能需要各种拖拽的组件。所以给大家做一些推荐。访问地址

VueDraggablePlus

可以有多种方式，

1，组件

2，函数方式

3，指令方式

npm install vue-draggable-plus

这里我只做对组件的使用方法（对其他方式感兴趣的，可以去官网学习一下）：

<template>

? <div class="flex">

? ? <VueDraggable

? ? ? ref="el"

? ? ? v-model="list"

? ? ? :disabled="disabled"

? ? ? :animation="150"

? ? ? ghostClass="ghost"

? ? ? class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"

? ? ? @start="onStart"

? ? ? @update="onUpdate"

? ? >

? ? ? <div

? ? ? ? v-for="item in list"

? ? ? ? :key="item.id"

? ? ? ? class="cursor-move h-30 bg-gray-500/5 rounded p-3 cursor-move"

? ? ? >

? ? ? ? {{ item.name }}

? ? ? </div>

? ? </VueDraggable>

? ? <preview-list :list="list" />

? </div>

</template>

<script setup lang="ts">

import { ref } from 'vue'

import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'

const list = ref([

? {

? ? name: 'Joao',

? ? id: 1

? },

? {

? ? name: 'Jean',

? ? id: 2

? },

? {

? ? name: 'Johanna',

? ? id: 3

? },

? {

? ? name: 'Juan',

? ? id: 4

? }

])

const el = ref<UseDraggableReturn>()

const disabled = ref(false)

const onStart = () => {

? console.log('start')

}

const onUpdate = () => {

? console.log('update')

}

</script>

<style scoped>

.ghost {

? opacity: 0.5;

? background: #c8ebfb;

}

</style>

?