vue项目中使用vuedraggable

最近在学习一个可视化搭建的项目，里面用的拖拽就是draggable.js。看了几个中文的文档，有很多坑，可能是没有及时更新的原因。

VUe 

建议去看vuedraggable的官方文档，只不过是英文的。官方文档：https://github.com/SortableJS/Vue.Draggable；

由于vue3已经是默认版本了，所以vuedraggable也对应vue2.0和3.0有各自的版本，直接使用基本命令安装：

npm install vuedraggable --save

会默认安装2.1左右的版本，由于我的项目是vue3构建的，所以会报错：

就是draggable版本不对，导致错误，版本换位4.1.0的就解决了

npm i [email protected] --save 或 yarn add [email protected]

在官网里专门对vue版本的不同做了对应的解释，在vue2中，

   
{{element.name}}

//.vue file:

  import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

With transition-group:

    
        

            {{element.name}}
        
    

 而在vue3中，这样写是有问题的，官网提示：

Breaking changes:

1. Use item slot instead of default to display elements#使用项目槽而不是默认值来显示元素
2. Provide a key for items using itemKey props#使用itemKey道具为物品提供密钥

变动确实挺大的，写法如下：

From:

   
{{element.name}}

To:

 当使用transition时，现在应该使用tag和componentData来创建transition

From

    
        

            {{element.name}}
        
    

to

注：在进行clone时，vue2.x版本Draggable 组件中的配置项写法（:options="{group:{name: 'article',pull:'clone'}, sort: false}"）在vue3中不起效，

vue3中需要将里面的参数单独进行配置，如：:group="{name: 'article',pull:'clone'}"     :sort='false'  等。