大家好！我是猫猫，今天是第一次在简书上写文章，有点菜，希望谅解哈哈哈。
本文主要讲 Vue-Draggable 的使用和多个模块拖拉控件的实现，主要也是因为在网上找的文章可能不适合当前项目所需，所以就研究了几天，突发奇想，我就注册个账号发发文章跟小伙伴们交流交流~
安装
首先安装 Vue-Draggable
npm install vue-draggable --save
页面引入该组件
import draggable from "vuedraggable";
如图：
使用
先上实现的效果图，如图：
默认显示卡片，该卡片实现了调整顺序和隐藏卡片的效果。
调整顺序：卡片实现可以拖拉效果，之前做完静态效果自我感觉很好，数据也没有错误，但放入项目才发现动态的数据不会随着拖拉的位置改变，例如：图左1拖拉到图中1，左2标题正常，内容显示左1的数据。所以在此处做了优化，才放到了项目中运用。
隐藏卡片：就是把改卡片放入了一个隐藏的块里。
展示就到这里了，这里就重点讲解一下思路。
首先：如图1效果所见这里分为四个部分，左边，中间，右边，还有底部（隐藏的），分别为四个数组去存储。
然后定义一个大数组，各个部分去绑定大数组的值，这样就实现了，如此可继续扩展，再多几个可拖拉组件也是这样的，就是再去绑定大数组的值。（是不是很简单哈哈哈！）
如图：
这里我是存了一个属性去判断它的位置，可以自定义存放的内容数据
如图：
这里每次拖动卡片需要更新属性(pos)，数据才会更新，放在watch里。
如图：
到这里就告一段落了，我第一次写文章，如有不懂，建议，请大家多多指点，下面是github上的源码，供大家去下载借鉴，希望能帮助大家解决问题，谢谢大家。
