vue 拖拽div

不知道你们有没有这样的首页，一块一块是装在div里，类似于下图（公司项目打码了）写的各色的样式，现在需要将他们可以拖动挪动位置，

查阅了一些资料，必须得放在数组里面才可以实现，于是我就将这些div，封装了几个组件

然后引入组件

import indexCard1 from "@/views/indexCard/1.vue";
import indexCard2 from "@/views/indexCard/2.vue";
import indexCard3 from "@/views/indexCard/3.vue";
import indexCard4 from "@/views/indexCard/4.vue";
import indexCard5 from "@/views/indexCard/5.vue";
import indexCard6 from "@/views/indexCard/6.vue";
import indexCard7 from "@/views/indexCard/7.vue";
import indexCard8 from "@/views/indexCard/8.vue";

 在使用的页面注册组件，就可以了

export default {
  components: {
    indexCard1,
    indexCard2,
    indexCard3,
    indexCard4,
    indexCard5,
    indexCard6,
    indexCard7,
    indexCard8
  },
}

我先是展示出来，证明我的引入没有问题

首先安装依赖

npm i -S vuedraggable

在使用的页面引入依赖

import draggable from "vuedraggable";

因为要存放到数组里面，所以就不能如我上面所写，

  data() {
    return {    
 disabledDrag: false, //默认开启拖拽 
   contentItems: [
        { lable: "1", value: indexCard1 },
        { lable: "2", value: indexCard2 },
        { lable: "3", value: indexCard3 },
        { lable: "4", value: indexCard4 },
        { lable: "5", value: indexCard5 },
        { lable: "6", value: indexCard6 },
        { lable: "7", value: indexCard7 },
        { lable: "8", value: indexCard8 },
      ],
         }
      }

value里面放的就是组件，然后去遍历组件；
 

  <div class="app-container home">
    <el-row :gutter="20">
      <draggable
        v-model="contentItems"
        chosen-class="chosen"
        force-fallback="true"
        group="itxst"
        :disabled="disabledDrag"
        animation="1000"
      >
        <transition-group>
          <el-col :span="12" v-for="(item, index) in contentItems" :key="index">
            <component :is="item.value"></component>
          </el-col>
        </transition-group>
      </draggable>
    </el-row>
  </div>

因为我是想要一排展示两个，所以用了row和col,如果没有要求吧col换成div就可以啦，需要注意的是draggable里面不可以放row

现在就实现了想要随意移动装满内容的div盒子啦

最终效果图: