vue2使用拖拽排序，有平滑移动效果

Vue 2 中实现拖拽排序并带有平滑移动效果，通常会结合 HTML5 的 Drag and Drop API 和 Vue.js 的响应式特性以及计算属性或事件监听机制。以下是一个简单的步骤：

1. 安装依赖库：如 `vuedraggable` 或 `vue-drag-resize` 这样的第三方插件，它们封装了拖拽功能并提供平滑动画。

npm install vuedraggable

2. 引入并在组件中使用该插件：

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    DraggableList: draggable({
      group: 'draggable-group', // 集合名，避免元素之间互相影响
      drag: function (el, ev) { // 拖动回调，可以设置拖动时的样式变化
        el.style.transition = 'all 0.3s ease'; // 添加过渡效果
      },
      end: function (el, ev) { // 移动结束后的回调，处理新位置
        // 更新数据源，比如数组顺序
        this.updateOrder(el.dataset.index);
      }
    })
  },
  data() {
    return {
      items: [...] // 初始化的数据列表
    };
  },
  methods: {
    updateOrder(index) {
      const newItems = this.items.map((item, i) => (i === index ? item : this.items[i]));
      this.items = newItems; // 更新Vue实例的数据
    }
  }
};
</script>

3. 在模板中使用 `draggable-list` 组件，并绑定数据：

<template>
  <div>
    <draggable-list :items="items" v-model="items">
      <!-- item 内容 -->
    </draggable-list>
  </div>
</template>

4. 使用模板语法或自定义指令观察和更新排序状态。

通过这种方式，用户可以在列表中轻松地拖动元素，并在松开鼠标时看到平滑的移动效果。当你需要复杂排序规则或更精细的交互控制时，还可以根据需求调整相关的钩子函数。