Vue 组件 Vue-Draggable 的使用

        大家好！我是猫猫，今天是第一次在上写文章，有点菜，希望谅解哈哈哈。

        本文主要讲 Vue-Draggable 的使用和多个模块拖拉控件的实现，主要也是因为在网上找的文章可能不适合当前项目所需，所以就研究了几天，突发奇想，我就注册个账号发发文章跟小伙伴们交流交流~

安装

        首先安装 Vue-Draggable

npm install vue-draggable --save

        页面引入该组件

import draggable from "vuedraggable";

        如图：

引入组件

使用

        先上实现的效果图，如图：

效果图

        默认显示卡片，该卡片实现了调整顺序和隐藏卡片的效果。

        调整顺序：卡片实现可以拖拉效果，之前做完静态效果自我感觉很好，数据也没有错误，但放入项目才发现动态的数据不会随着拖拉的位置改变，例如：图左1拖拉到图中1，左2标题正常，内容显示左1的数据。所以在此处做了优化，才放到了项目中运用。

        隐藏卡片：就是把改卡片放入了一个隐藏的块里。

默认显示

        展示就到这里了，这里就重点讲解一下思路。

        首先：如图1效果所见这里分为四个部分，左边，中间，右边，还有底部（隐藏的），分别为四个数组去存储。

        然后定义一个大数组，各个部分去绑定大数组的值，这样就实现了，如此可继续扩展，再多几个可拖拉组件也是这样的，就是再去绑定大数组的值。（是不是很简单哈哈哈！）

        如图：

存放卡片的数组

页面代码运用

        这里我是存了一个属性去判断它的位置，可以自定义存放的内容数据

        如图：

        这里每次拖动卡片需要更新属性(pos)，数据才会更新，放在watch里。

        如图：

        到这里就告一段落了，我第一次写文章，如有不懂，建议，请大家多多指点，下面是github上的源码，供大家去下载借鉴，希望能帮助大家解决问题，谢谢大家。

        github：https://github.com/loseChuan/Vue-Study