这个案例是利用vuedraggable渲染动态组件，

bug：拖拽失效  vue2是需要在component这个标签上v-for，vue3是不需要的

<template>
  <div>
      <div>
        <vuedraggable
          ref="drag"
          v-model="state.listComp"
          v-bind="state.dragOptions"
          :forceFallback="true"
          item-key="id"
          handle=".draggableItem"
        >
          <template #item="{ element }">
            <component
              :key="element.name"
              :is="element.name"
              v-bind="element"
              class="item"
            >
            </component>
          </template>
        </vuedraggable>
      </div>
  </div>
</template>

<script setup>
import vuedraggable from "vuedraggable";
import { reactive } from "vue";

const state = reactive({
  date: "2023-08-16",
  listComp: [
    // 数据
  ],
  dragOptions: {
    animation: 0,
    disabled: false,
    group: "description",
    ghostClass: "ghost",
  },
});

</script>

<style lang="scss" scoped><style>