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裏面配置的，經驗告訴咱們，必定要仔細閱讀文檔，答案都在文檔裏面，好了，若是能幫助到正在看文章的你，就好，大神請忽略！