vue3使用vuedraggable实现拖拽（有过渡）

在Vue 3中，你可以使用<transition-group>元素和vuedraggable来实现有过渡效果的拖拽功能。以下是一个简单的例子：

首先，确保你已经安装了vuedraggable：

npm install vuedraggable

然后，在你的组件中使用它：

<template>
  <div class="drag-container">
    <transition-group name="drag-item" tag="div" class="list-group">
      <div
        v-for="item in list"
        :key="item.id"
        class="list-group-item"
      >
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';
 
export default {
  directives: {
    draggable,
  },
  setup() {
    const list = ref([
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' },
      // ...
    ]);
 
    return {
      list,
    };
  },
};
</script>
 
<style>
.drag-container {
  display: flex;
  justify-content: space-around;
}
 
.list-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
 
.list-group-item {
  margin: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  cursor: move;
}
 
.drag-item-move {
  transition: transform 0.5s;
}
</style>

在这个例子中，transition-group元素用于创建一个列表项的过渡效果，其中name属性指定了CSS过渡的类名前缀。tag属性定义了这个组的最外层HTML标签。CSS中.drag-item-move类定义了拖拽过渡效果。

vuedraggable指令用于使列表项可拖拽。你可以通过拖拽来重新排列列表项，并且每次排序的变化都会带有过渡效果。