【VUE】前端vuedraggable实现拖拽功能，以及vuedraggable和awe-dnd区别

因为马上要做一个拖拽排序的功能，便先来了解下拖拽框架的使用，网上一搜就可以看到有vuedraggable和 awe-dnd。这两个是一个东西，不同的是，两个库的里面不同，一个是直接进行组件封装，一个是进行指令封装。

于是便同时安装了两个插件，看下区别

vuedraggable的使用

awe-dnd的使用

---

• 从上图可以看出来，其实vuedraggable动画效果更好点，再其次vuedraggable的文档更多点，而且github上有一些用法的代码

• 这个两个文档都很少，一些用法要自己去找研究，不太友好，唯一庆幸的是vuedraggable有例子

一开始看文档把代码粘贴上去，并没有上图的拖拽动画效果，后面看例子，才知道且将可拖动元素放进了 transition-group 下面才有过渡动画, awe-dnd也是一样。

---

指定点击某块才能拖拽

3.gif

设置handle就可以指定, 如果不想指定可以去掉，具体代码如下

---

awe-dnd 的示例如下

再次更新2020/10/22

注意：
1.两个 draggable 节点中, group 的 name 是一样的, 这样就可以实现两个区域的相互拖拽.

2. draggable 节点中加上 :sort='false' 不能拖动排序

3.draggable 节点中, group 添加 put: false, 不能从另一个数组中拖回来

4. 点击删除后, 按原顺序回到原数组中，, 从 collections 数组中删除, 通过计算属性 notCollectedMenus
   来添加到下面的区域.

     ...
    
...
computed: {
  notCollectedMenus: function () {
    return this.list2.filter(item=> {
      let obj = this.list1.find(ele=> ele.id === item.id)
      return obj == undefined ? true : false
    })
  },
},
...