SortableJS/vuedraggable 在vue中应用，两栏内容互相拖拽

官方网址：https://github.com/SortableJS/Vue.Draggable

demo:https://sortablejs.github.io/Vue.Draggable/#/simple

  <v-row>
    <v-col cols='3'>
      <h3>ROCS1</h3>
      <draggable
        class="list-group"
        :list="list1"
        v-bind="dragOptions"
        @start="drag = true"
        @end="drag = false"
      >
        <transition-group type="transition" :name="!drag ? 'flip-list' : null">
          <div
          class="list-group-item"
            v-for="(element, index) in list1"
            :key="element.name"
            style="background-color: #e3edf7;"
          >
            {{ element.name }} {{ index }}
          </div>
        </transition-group>
      </draggable>
    </v-col>

    <v-col cols='3'>
      <h3>ROCS2</h3>
      <draggable
        class="list-group"
        :list="list2"
        v-bind="dragOptions"
        @start="drag = true"
        @end="drag = false"
      >
        <transition-group type="transition" :name="!drag ? 'flip-list' : null">
          <div
            class="list-group-item"
            style="background-color: #fff6b2; "
            v-for="(element, index) in list2"
            :key="element.name"
          >
            {{ element.name }} {{ index }}
          </div>
        </transition-group>
      </draggable>
    </v-col>

    <v-col cols='3' title="List 1">{{ list1 }}</v-col>
    <v-col cols='3' title="List 1">{{ list2 }}</v-col>
  </v-row>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "two-lists",
  display: "Two Lists",
  order: 1,
  components: {
    draggable,
  },
  data() {
    return {
      list1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 },
      ],
      list2: [
        { name: "Juan", id: 5 },
        { name: "Edgard", id: 6 },
        { name: "Johnson", id: 7 },
      ],
      drag: false,
    };
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    },
  },
  methods: {
    add() {
      this.list.push({ name: "Juan" });
    },
    replace() {
      this.list = [{ name: "Edgard" }];
    },
    clone(el) {
      return {
        name: el.name + " cloned",
      };
    },
    log(evt) {
      console.log(evt);
    },
  },
};
</script>
<style scoped>
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group-item {
  min-height:50px;
  line-height:50px;
  cursor: move;
  border-bottom: 1px solid #ccc
}

</style>

标签：两栏,vue,return,name,move,list,SortableJS,group,id
来源： https://blog.csdn.net/Little_Fishs/article/details/123206972