image.png

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <draggable
        class="list-group"
        :list="list1"
        group="people"
        @change="log"
        item-key="id"
      >
        <template #item="{ element, index }">
          <div class="drag-item">{{ element.name }}</div>
        </template>
      </draggable>
    </el-col>
    <el-col :span="12">
      <draggable
        class="list-group"
        :list="list2"
        group="people"
        @change="log"
        item-key="id"
      >
        <template #item="{ element, index }">
          <div class="drag-item">{{ element.name }}</div>
        </template>
      </draggable>
    </el-col>
  </el-row>
</template>
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      list1: [
        { name: "北京", id: 1 },
        { name: "上海", id: 2 },
        { name: "广州", id: 3 },
        { name: "深圳", id: 4 },
      ],
      list2: [
        { name: "天津", id: 5 },
        { name: "济南", id: 6 },
        { name: "成都", id: 7 },
      ],
    };
  },
  methods: {
    log: function (evt) {
      console.log(this.list1, this.list2);
    },
  },
};
</script>
<style lang="scss" scoped>
.drag-item {
  height: 30px;
  background: #f1f1f1;
  color: #000;
  margin-bottom: 10px;
  line-height: 30px;
  padding-left: 15px;
}
</style>