商品排序管理弹窗中的商品卡片支持手动拖拽排序功能

ChatGPT: 想要实现 商品排序管理弹窗中的商品卡片支持手动拖拽排序功能，可以使用 Vue 中非常流行的拖拽排序库：vuedraggable（基于 SortableJS）。

✅ 实现目标：

• 商品列表中拖动 .order-item 实现排序
• 拖拽排序后，更新 scene.activityItemList 顺序

🔧 步骤一：安装依赖

npm install vuedraggable --save

✍️ 步骤二：修改代码（重点）

1. 引入组件并注册

import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  ...
}

2. 修改模板中的 .order-item 循环：

<!-- 替换 v-for 的外层 -->
<draggable
  v-model="scene.activityItemList"
  handle=".drag-handle"
  animation="200"
  :force-fallback="true"
>
  <div
    v-for="(item, index) in scene.activityItemList"
    :key="item.itemId"
    class="order-item"
  >
    <div>
      <p>商品名称: {{ item.itemName }}</p>
      <p>商品ID: {{ item.itemId }}</p>
    </div>
    <div class="item-right">
      <el-button
        type="text"
        @click="move(scene, item, index)"
      >
        上移
      </el-button>
      <el-button
        type="text"
        @click="moveTop(scene, item, index)"
      >
        置顶
      </el-button>
      <p class="button-option drag-handle"> 三 </p>
    </div>
  </div>
</draggable>

• handle=".drag-handle" 表示 只能通过 三 图标拖拽
• v-model="scene.activityItemList" 会在排序后自动更新数据顺序

🎨 样式建议：

.button-option {
  margin-left: 10px;
  color: rgb(65, 149, 251);
  cursor: move; // 表示可拖拽
  user-select: none;
}

记录一下今天使用到的 Vue 中非常流行的拖拽排序库。