Vue.Draggable实现拖拽效果（采坑小记）

　　以前有写过Vue.Draggable实现拖拽效果（快速使用）（http://www.cnblogs.com/songdongdong/p/6928945.html）最近项目中要用到这个拖拽的效果，当产品那个今日头条app编辑导航，拖拽的效果时，内心暗爽，（以前玩过呀，很简单的，事实证实，任何看似简单的东西，实现起来都不会那么一路顺风，固然：当你真正实现了该效果时，会发现其实仍是挺简单的：ps:自说自话，本身打本身脸\(^o^)/~），闲话少说，直接切入正题：

　　仔细观察发现，今日头条导航部分编辑效果，有如下几个效果

　　1：点击编辑开启能够编辑的效果（也就是是否开启拖拽）

　　2：拖拽前选中效果

　　3：拖动过程当中元素移动到目标位置的运动效果

　　这是Vue.Draggable做者的git地址：https://github.com/SortableJS/Vue.Draggable，至于怎么引入到你的vue项目，请参考以前的这篇博客（http://www.cnblogs.com/songdongdong/p/6928945.html）引入以后咱们发现Vue.Draggable默认就是开启拖拽状态的，那咱们要控制这个状态怎么办呢？在做者项目的首页，发现并无详细介绍，是否是有这个状态提供，固然也许是由于本身英语太渣，没有发现这句话（See here for reference），后来发现，点进去，发现了不少好玩的东西，具体有哪些，请移步看这里（https://github.com/RubaXa/Sortable#event-object-demo）这里咱们只挑咱们须要的，而后我就发现这个东东：

这不就是咱们想要的么，若是你认为是这个属性直绑定到组件上，那么你就错了，在往下看，彷佛有怎么使用的实例代码，那咱们不妨看看是怎么样的：

其实看到这个你大概知道怎么用了，若是还不会那么不着急，我贴一下个人代码你就知道怎用了

 

嗯就是这么简单，而后你再去控制这个disable就能够，至于怎么控制，接触过vue的人应该都会，就不说了，到这里咱们第一个问题就解决，那我后面两个问题呢？

别急，其实和第一个如出一辙

还有一些其余配置项的解释：

1.ghostClass:'ghostClass';拖拽中占位的元素的类名（通常设置opacity:1）达到空出该位置的视觉效果

2.dragClass:'dragClass';元素拖拽中的类名

哈哈就是这么简单，惊不惊喜，意不意外！！！以前之因此，称之为问题是由于，觉得那些配置项都是直接配置在组件上的，好了上面三个问题基本算是解决了，其实咱们发现，这个过程当中烦在哪里，就是知道配置项options是挂在在draggable组件上，那些控制draggable的行为都是在options里面配置的，经验告诉咱们，必定要仔细阅读文档，答案都在文档里面，好了，若是能帮助到正在看文章的你，就好，大神请忽略！