vue的拖拽功能（vuedraggable）

自己后来总结的，数组为空时，拖不进去踩的坑的文章链接https://blog.csdn.net/Cool_so_cool/article/details/113585598?spm=1001.2014.3001.5501

首先可以先看一下npm的官方文档：https://www.npmjs.com/package/vuedraggable
http://www.itxst.com/vue-draggable/2ynnruzu.html
https://www.jianshu.com/p/382ac5f9d6ff
先理解一下，能看懂官方文档更好，看不懂，来看看项目中的实践。
1.先看两种下载方式

yarn add vuedraggable
 
npm i -S vuedraggable

2.具体引入方式看各位项目中的位置了，下面来说一下，我项目中的引入方式
官方文档引入和注册

import draggable from 'vuedraggable'

export default {
        components: {
            draggable,
        },

官方文档直接写的是例子，没用过第一次肯定是看不懂的，
可能是我太菜了~~~~
With transition-group:

<draggable v-model="myArray">
    <transition-group>
        <div v-for="element in myArray" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

这里面先只写一个，大家看一下，今天没时间一一详解官方文档的内容了，有时间都给补上，下面直接看我项目中的运用吧，很简单。

1. 先看一下效果图
   
   拖动左边的list列表，可以上下排序，左边的移动右边的Tab表格的排列方式也要跟着变。这是我们想要的效果，细节代码有很多，因为今天很忙，着急上线，先不说那么多了，就先记录一下，简单的拖拽功能吧。
   看代码，算了，还是看图片清晰点
   
   上面有下载步骤和引用步骤，都是官方文档的，但是因项目文件内容，我是这么引用和注册的。
   在看代码里面怎么用的吧，看了别人写的，太麻烦了，我直接这么写，就可以了，简单粗暴
   

首先解释一下：
list是什么意思，这个呢，是draggable中自带的一个属性，后面跟着的是你下面循环的数组，
在解释一下group=“people”
group: string or array 分组用的，同一组的不同list可以相互拖动
其实这vuedraggable里面的属性挺多的，我这只是其中两个，有时间都给整理出来，我这个现在只是实现了左侧list列表的拖拽功能，效果图等整理出来一块发，就先这样啦~~~~~