vue-draggable配置從入門到精通

以上是實現項目結果，難點在於二級的拖動不會影響三級，就是二級領導能夠隨便換，三級員工保持不變，一二三級能夠隨便拖拽，還有一些新建和條件彈窗等功能。vue-draggable是數據驅動的，實現以上效果，並且佈局要隨之變化，確實花費了一些功夫。

首先

咱們講一下vue的基礎用法，在掌握了基礎用法之後，咱們就會融匯變通，實現比較難的需求。

安裝

cnpm i vuedraggable -S

使用

使用很簡單，在須要使用拖拽的界面引入，組件中註冊，就能夠使用了。

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

屬性

group: { name: "...", pull: [true, false, clone], 
  tag: 'td' // 默認div，設置draggable標籤解析html標籤
  v-model：data // 綁定數據列表
  put: [true, false, array] } //name相同的組能夠互相拖動, pull能夠寫條件判斷，是否容許拖走，put能夠寫條件判斷，是否容許拖入
  sort: true,  // 內部拖動排序列表
  delay: 0, // 以毫秒爲單位定義排序什麼時候開始。
  touchStartThreshold: 0, // px,在取消延遲拖動事件以前，點應該移動多少像素?
  disabled: false, // 若是設置爲真，則禁用sortable。
  animation: 150,  // ms, 動畫速度運動項目排序時，' 0 ' -沒有動畫。
  handle: ".my-handle",  // 在列表項中拖動句柄選擇器，設置某些地方拖動纔有效。
  filter: ".ignore-elements",  // 不能拖拽的選擇器(字符串 class)
  preventOnFilter: true, // 調用「event.preventDefault()」時觸發「filter」
  draggable: ".item",  // 指定元素中的哪些項應該是可拖動的class。
  ghostClass: "sortable-ghost",  // 設置拖動元素的class的佔位符的類名。
  chosenClass: "sortable-chosen",  // 設置被選中的元素的class
  dragClass: "sortable-drag",  //拖動元素的class。
  forceFallback: false,  // 忽略HTML5的DnD行爲，並強制退出。（h5裏有個屬性也是拖動，這裏是爲了去掉H5拖動對這個的影響）
  fallbackClass: "sortable-fallback",  // 使用forceFallback時克隆的DOM元素的類名。
  fallbackOnBody: false,  // 將克隆的DOM元素添加到文檔的主體中。（默認放在被拖動元素的同級）
  fallbackTolerance: 0, // 用像素指定鼠標在被視爲拖拽以前應該移動的距離。
  scroll: true, // or HTMLElement
  scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... },
  scrollSensitivity: 30, // px
  scrollSpeed: 10, // px

事件

start,add,remove,update,end,choose,unchoose,sort,filter,clone

start (evt) {} // 剛開始拖動時候觸發
add (evt) {} // 拖拽新增的時候觸發
remove (evt) {} // 從列表拖走，移除觸發
update (evt) {} // 列表更新觸發
end (evt) {} // 和start對應，拖拽完了觸發
choose(evt) {} // 選擇拖拽元素觸發
sort (evt) {} // 排序觸發
change (evt) {} // 這個很重要，若是數據不是整個提交，單個提交數據的時候就會用到它 evt.added.element / evt.removed.element若是這個列表添加元素就會added的數據，若是刪除元素就是removed的元素，還會獲取到移動和刪除的所在位置index
:move (evt, dragevt) {} // 這個也很重要，在兩個列表相互拖拽的時候，有時候須要更新ui，在接口尚未更新以前，因此就會用到move，他是把元素從一個列表拖到另外一個列表的瞬間觸發，這時候能夠給原來的位置設置元素樣式等等。

firefox 火狐瀏覽器默認拖拽搜索問題

created () {
    // 阻止火狐瀏覽器默認的拖拽搜索行爲
    document.body.ondrop = (event) \=> {
        // 阻止事件默認行爲
        event.preventDefault()
        // 阻止時間冒泡
        event.stopPropagation()
    }
}

safari瀏覽器的拖拽問題

safari瀏覽器拖動一次，不能連續拖動第二次，只能在空白處單機才能夠繼續拖拽，添加 :forceFallback="true"解決

<draggable
:group="{name: 'scene', pull: 'clone'}"
:sort="false"
:forceFallback="true"

好了基礎知識到此爲止，多看看官方文檔。
https://github.com/SortableJS/Vue.Draggable
未完待續（分析項目難點以及實現過程，源代碼）...