vue draggable图标拖拽效实现

<draggable class="tab-page" v-model="tabList" animation="500">
    <transition-group class="tab-content">
      <div
        class="tab-single"
        v-for="(item, index) in tabList"
        :key="item.name"
        @click="goToQrCode"
      >
        <img :src="item.img" width="50px" />
        <div>{{ item.name }}</div>
      </div>
    </transition-group>
  </draggable>

import draggable from "vuedraggable";

data() {
    return {
      tabList: [
        {
          name: "Test1",
          img: require("../static/tab-erp.png"),
        },
        {
          name: "Test2",
          img: require("../static/tab-erp.png"),
        },
        {
          name: "Test3",
          img: require("../static/tab-erp.png"),
        }
    ]
    ...

首先安装依赖：

yarn add vuedraggable | npm install vuedraggable 

animation="500"  用来设置拖拽动画。

获取到拖拽后的最新数据

updated() {
    console.log(this.tabList);
}

拖拽前：

拖拽后：