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

>因为马上要做一个拖拽排序的功能,便先来了解下拖拽框架的使用,网上一搜就可以看到有[vuedraggable](https://www.npmjs.com/package/vuedraggable)和 [awe-dnd](https://github.com/hilongjw/vue-dragging)。这两个是一个东西,不同的是,两个库的里面不同,一个是直接进行组件封装,一个是进行指令封装。

于是便同时安装了两个插件,看下区别
![vuedraggable的使用](https://upload-images.jianshu.io/upload_images/10886634-f67369c8e5981710.gif?imageMogr2/auto-orient/strip)
![awe-dnd的使用](https://upload-images.jianshu.io/upload_images/10886634-efe36eb8c8911253.gif?imageMogr2/auto-orient/strip)
----
- 从上图可以看出来,其实vuedraggable动画效果更好点,再其次vuedraggable的文档更多点,而且github上有一些用法的代码

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

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

----

#####指定点击某块才能拖拽
![3.gif](https://upload-images.jianshu.io/upload_images/10886634-b8217a08e7fbc2d3.gif?imageMogr2/auto-orient/strip)
设置handle就可以指定, 如果不想指定可以去掉,具体代码如下

```



```
----

###awe-dnd 的示例如下
```


```

你可能感兴趣的:(vue)