vue2 + element-ui + vuedraggable 实现表格内多列表拖拽

本文这个dom 是借助的 vuedraggable 实现的拖拽 vue.draggable中文文档 - itxst.com

HTML部分

使用的 element-ui 的表格组件作为外部盒子 实际拖拽的 是内部的订单信息

<div class="drag_table_wapper">
    <el-button @click="draggableDisabled = !draggableDisabled">{{
      draggableDisabled ? "开启拖拽" : "保存"
    }}</el-button>
    <el-table
      :data="tableData"
      id="table_count"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="routeName" label="线路" width="100" align="center">
      </el-table-column>
      <el-table-column label="订单信息" width="500px" align="center">
        <template slot-scope="scope">
          <draggable
            :key="scope.row.routeId"
            v-model="scope.row.order"
            :options="sortableListOptions"
            :data-id="scope.row.routeId"
            @end="onDragEnd(scope.row, $event)"
            class="draggableBox"
            :disabled="draggableDisabled"
          >
            <div
              v-for="(item, index) in scope.row.order"
              :key="item.id"
              class="orderItem"
            >
              <div>
                {{ index + 1 }}
              </div>
              <div>
                {{ item.name }}
              </div>
              <div>
                {{ item.phone }}
              </div>
              <div>￥{{ item.price }}</div>
            </div>
          </draggable>
        </template>
      </el-table-column>

      <el-table-column prop="allNum" label="总计" align="center">
        <template slot-scope="scope">
          ￥ {{ AllPrice(scope.row.order) }}
        </template>
      </el-table-column>
    </el-table>
  </div>

JS 部分

import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      tableData: [],
      draggableDisabled: true,
    };
  },
  mounted() {
    this.getTableData();
  },
  computed: {
    sortableListOptions() {
      return {
        group: "tableData",
      };
    },
  },
  methods: {
    async getTableData() {
      let res = await tableData();
      console.log(res, "res");
      this.tableData = res;
    },
    AllPrice(order) {
      let num = 0;
      order.forEach((item) => {
        num += item.price;
      });
      return num;
    },
    onDragEnd(order, evt) {
      const { newIndex, oldIndex, from, to } = evt;
      // 获取源列表和目标列表
      const sourceList = this.tableData.find(
        (list) => list.routeId === from.dataset.id
      );
      const targetList = this.tableData.find(
        (list) => list.routeId === to.dataset.id
      );
      // 获取拖拽项
      const item = targetList.order[newIndex];
      console.log(
        `订单${item.name} 从 ${sourceList.routeName}第${
          oldIndex + 1
        }个 挪到了 ${targetList.routeName} 第${newIndex + 1}个`
      );
    },
  },
};

使用 draggable 的@end 来监听拖拽结束事件 通过evt 里的 form to 获取到从哪个列表 拖到了哪个列表 通过 draggableDisabled 开启关闭 拖拽功能 因为本文使用的 mockjs 模拟的数据 所有每次刷新数据都会发生改变

表格拖拽效果