请使用vue3 setup语法糖创建一个可拖拽列表组件，包含转换动画

由于涉及到一些复杂的动画效果，建议使用第三方库vue-draggable来实现可拖拽列表组件，同时结合Vue3的setup语法糖进行封装。

首先，安装vue-draggable：

npm install vuedraggable

接着，创建一个DraggableList组件，代码如下：

<template>
  <draggable v-model="items" :options="options">
    <transition-group tag="ul" class="list">
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </transition-group>
  </draggable>
</template>

<script>
import { defineComponent } from 'vue'
import draggable from 'vuedraggable'

export default defineComponent({
  components: {
    draggable,
  },
  setup() {
    const items = [
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' },
      { id: 4, text: 'Item 4' },
      { id: 5, text: 'Item 5' },
    ]

    const options = {
      animation: 200,
      handle: '.handle',
    }

    return {
      items,
      options,
    }
  },
})
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

在setup函数中，定义了一个items数组，用于存储列表项数据。options对象中的animation属性表示动画持续时间，handle属性表示拖拽时需要拖动的元素。

在模板中，使用draggable组件来创建可拖拽列表，通过v-model指令绑定items数组，通过options属性设置拖拽选项。

使用transition-group组件来包裹列表项，tag属性表示渲染的元素类型，class属性用于定义样式。在样式中，通过transition属性定义动画效果。

最终的效果如下图所示：