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里面放的就是组件，然后去遍历组件；
 

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

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

最终效果图: