vue3 draggable组件的使用（通俗易懂，拿来就用）

因为是vite创建vue3的项目，所有代码都是在此基础进行的

vue3 Draggable官方文档

vue2的官方文档如下，大家可以参考学习：
vue2 Draggable官方文档

第一步：安装

在项目目录下安装

npm i -S vuedraggable@next
或
yarn add vuedraggable@next

第二步：使用

1. 单个拖拽区域

<template>
  <div class="row">
    <div class="col-4">
      <draggable
        :list="list"   //:list='xxx' xxx是想要拖动的列表
        class="list-group"
        group="a"    
        //group="xxx" 如果xxx相同，代表这些列表内可以自由拖动
        item-key="id"  //item-key="xxx"代表每个列表的唯一标识
      >
        <template #item="{ element }">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script name="App" lang="ts" setup>
import draggable from "vuedraggable";
import {reactive} from 'vue'
let list=reactive([
  { name: "John 1", id: 0 },
  { name: "Joao 2", id: 1 },
  { name: "Jean 3", id: 2 }
])
</script>
<style scoped>
.col-4{
  width: 400px;
  border: 1px solid black;
  margin-bottom: 20px;
}
.list-group-item{
  padding: 10px;
  background-color: pink;
  margin-bottom: 10px;
}
</style>

group ：可以限制拖放只在特定的区域内生效，确保拖动操作只在同一分组内有效
item-key：用于标识在循环渲染列表时，每个列表项所使用的唯一键（key）

2. 多个拖拽区域

<template>
  <div class="row">
    <div class="col-4">
      <draggable
        :list="list" 
        class="list-group"
        group="a"
        item-key="id"
      >
        <template #item="{ element }">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>

    <div class="col-4">
      <draggable 
        :list="list2" 
        class="list-group" 
        group="a" 
        item-key="id">
        <template #item="{ element }">
          <div class="list-group-item item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script name="App" lang="ts" setup>
import draggable from "vuedraggable";
import {reactive} from 'vue'
let list=reactive([
  { name: "John 1", id: 0 },
  { name: "Joao 2", id: 1 },
  { name: "Jean 3", id: 2 }
])
let list2=reactive([
  { name: "John 1", id: 0 },
  { name: "Joao 2", id: 1 },
  { name: "Jean 3", id: 2 }
])
</script>
<style scoped>
.col-4{
  width: 400px;
  border: 1px solid black;
  margin-bottom: 20px;
}
.list-group-item{
  padding: 10px;
  background-color: pink;
  margin-bottom: 10px;
}
.item{
  background-color: lightcoral;
}
</style>