vuedraggable实现分组拖拽，组与组之间拖拽排序，组内部元素跨组拖拽

代码如下：

参考 https://sortablejs.github.io/Vue.Draggable/#/functional

<template>
  <draggable v-model="rows" tag="div" class="wrapper" handle=".group-mover">
    <div class="columns-wrapper" v-for="(col, idxCol) in rows">
      <div class="column-title-wrapper">
        <span class="title group-mover">分组-{{ col.id }}</span>
        <span class="num">1</span>
        <span class="flex-1"></span>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <i class="el-icon-more more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <draggable :list="col.items" tag="div" :group="{ name: 'col' }" class="column-item">
        <div class="card" v-for="(card, idx) in col.items">{{ col.id }}————{{ card.title }}</div>
      </draggable>
    </div>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable,
  },

  data() {
    return {
      rows: [
        {
          id: "AAA",
          index: 1,
          items: [
            {
              id: "aaaa",
              title: "item 1",
            },
            {
              id: "bbbb",
              title: "item 111",
            },
            {
              id: "ccccc",
              title: "item 11111",
            },
          ],
        },
        {
          id: "BBBB",
          index: 2,
          items: [
            {
              id: "dddd",
              title: "item 2",
            },
            {
              id: "eeeee",
              title: "item 2222",
            },
          ],
        },
        {
          id: "CCCC",
          index: 3,
          items: [
            {
              id: "ffff",
              title: "item 333333",
            },
            {
              id: "gggg",
              title: "item 333",
            },
            {
              id: "hhhh",
              title: "item 333333333333333",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.group-mover {
  cursor: move;
}
.wrapper {
  background: #fff;
  width: 100%;
  border-top: 1px solid red;
  display: flex;
  overflow: auto;

  .columns-wrapper {
    width: 400px;
    flex-shrink: 0;
    padding: 10px;
    .column-title-wrapper {
      background: #f5d0d0;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 4px;
      .title {
        font-weight: bold;
        margin-right: 4px;
      }
      .num {
        background-color: #f56c6c;
        border-radius: 10px;
        color: #fff;
        display: inline-block;
        font-size: 12px;
        height: 18px;
        line-height: 18px;
        padding: 0 6px;
        text-align: center;
        white-space: nowrap;
        border: 1px solid #fff;
      }
    }
    .column-item {
      box-sizing: border-box;
      .card {
        border: 1px solid blue;
        height: 80px;
        margin-bottom: 10px;
        border-radius: 4px;
      }
    }
  }
  .columns-wrapper:not(:last-child) {
    border-right: 1px solid red;
  }
}
</style>

效果如下：