学习 vuedraggable 拖拽插件

vue 的插件一般比较乱，所以官方吧，自己搞了个插件库。网址部署在 GitHub 上：
https://github.com/vuejs/awesome-vue 我们需要拖拽插件就自己搜 drag ，然后我选了个 vuedraggable 。

做出来的预览效果大约如下所示：

vuedraggable

主要功能有：

• 拖拽排序
• 局部拖拽
• 分组拖拽
• 代码格式化

一、认识使用插件

本次案例一共使用了两个插件。

npm install --save vuedraggable //拖拽插件
npm install --save vue-json-viewer //数据格式化

• draggable 使用
  draggable 引入，在 Vue 的components 注册完，直接可作为组件使用，包裹要拖拽的组件就行。

1. animation="450" 拖拽这个过程完成的时间。
2. group="people 作为组，相同的组之间可进行拖拽。
3. :move="checkMove" 处理函数最重要的是 draggedContext，可以链接拖拽元素的上下文，记住拖拽元素。
4. @change="changed" 拖拽完成触发。如果绑定此事件的组件多了数据，将会有 e.added ，绑定此事件的组件少了数据，就会有 e.removed。在组件上移动完成会有 e.moved 每个API 对应的参数：
   

• json-viewer 的使用

1. theme 属性当类名使用。可通过 CSS 自定义代码的显示样式。
2. :expand-depth=2 代码的展开深度为二级。零级（0）不显示。
3. copyable 出现一键复制标志
4. boxed 变成一个圆盒子
5. sort 代码过多进行折叠。
6. :value="item" 进入显示区的数据。

使用的去看源代码吧！
源代码如下：

最近要审查上的违规内容，周期为一个月整，在这期间不能发布文章，那没办法了，这期间写完的就留个时间吧。

2019.08.31 22:48