vue3 使用 vuedraggable setup写法，添加header

---

---

前言

最近在写一些界面功能，犯了一些低级错误，有时候因为大小写问题找了很久没找到问题。

---

一、vuedraggable使用

<script lang="ts" setup>
import { defineComponent, reactive, ref, toRefs } from 'vue'
import Draggable from 'vuedraggable'

const myArray = ref([
  { id: 1, name: 'Jenny' },
  { id: 2, name: 'kevin' },
  { id: 3, name: 'lili' },
])
const myHBArray = ref([
  { id: 4, name: 'Je5nny' },
  { id: 5, name: 'ke5vin' },
  { id: 6, name: 'li6li' },
])
</script>

<template>
  <Draggable
    v-model="myArray"
    group="people"
    item-key="id"
    @start="drag = true"
    @end="drag = false"
  >
    <template #item="{ element }">
      <div>{{ element.name }}</div>
    </template>
  </Draggable>
  <Draggable
    v-model="myHBArray"
    group="people"
    item-key="id"
    @start="drag = true"
    @end="drag = false"
  >
    <template #item="{ element }">
      <div>{{ element.name }}</div>
    </template>
  </Draggable>
</template>

二、问题

1、因为参考了网上的一篇文章，把import Draggable from 'vuedraggable'写成了import draggable from 'vuedraggable'，导致代码不生效，一直以为是ref的问题。

2、参考文章：Vue3 使用 vuedraggable

三、添加header

效果图

相关代码

<script lang="ts" setup>
import Draggable from 'vuedraggable'

const listData = ref([
  {
    subName: 'item1',
    subId: 1,
    children: [
      {
        id: 1,
        name: '名字aaa1',
      },
      {
        id: 2,
        name: '名字aaa2',
      },
      {
        id: 3,
        name: '名字aaa3',
      },
    ],
  },
  {
    subName: 'item2',
    subId: 1,
    children: [
      {
        id: 1,
        name: '名字bbb1',
      },
      {
        id: 2,
        name: '名字bbb2',
      },
      {
        id: 3,
        name: '名字bbb3',
      },
    ],
  },
])
</script>

<template>
  <div class="mb-20px">
    Draggable的使用
  </div>
  <div v-for="item in listData" :key="item.id">
    <Draggable
      v-model="item.children"
      class="list-group flex flex-wrap mb-30px"
      group="people"
      :item-key="item.id"
    >
      <template #header>
        <div class="border-dotted border mr-20px w-400px flex h-154px center ">
          <p class="c-#00A7A7">
            添加
          </p>
        </div>
      </template>
      <template #item="{ element }">
        <div
          class="cursor-pointer p-10px w-400px flex center h-154px bg-red mb-12px mr-20px"
        >
          {{ element.name }}
        </div>
      </template>
    </Draggable>
  </div>
</template>

<style lang="scss" scoped>

</style>

---

Draggable

总结

遇到坑不可怕，而是需要找出解决的方法，希望能帮助到您！