Vue.Draggable拖拽功能的配置和使用方法

安裝方法：https://www.npmjs.com/package/vuedraggable

yarn add vuedraggable
 
npm i -S vuedraggable

使用案例：

<template>
  <div>
    <div class="div1">
      <vuedraggable class="wrapper" v-model="list" :options="{group:'people',}" @end="end">
        <div v-for="item in list" :key="item" class="item">
          <p>{{item}}</p>
        </div>
      </vuedraggable>
    </div>

    <div>電動機的角度講</div>
    <div class="div2">
      <vuedraggable class="wrapper" v-model="list2" :options="{group:'people',}">
        <div v-for="item in list2" :key="item" class="item">
          <p>{{item}}</p>
        </div>
      </vuedraggable>
    </div>
    <div class="div3">
      <vuedraggable class="wrapper_09" v-model="list2" :options="{group:'people',}">
        <div class="item">區域</div>
      </vuedraggable>
    </div>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
export default {
  components: { vuedraggable },
  data() {
    return {
      list: [1, 2, 34, 4, 54],
      list2: [1333, 2333, 34333]
    };
  },
  updated() {
    console.log("list:", this.list);
    console.log("list2:", this.list2);
  },
  mounted() {},
  methods: {
    end(ev){
      console.log(ev.to.className)
    }
  }
};
</script>
<style scoped>
/* .wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
} */
.wrap {
  width: 100%;
  height: 200px;
}
.item {
  width: 300px;
  height: 50px;
  background-color: #42b983;
  color: #ffffff;
  margin-right: 10px;
  float: left;
  margin-top: 10px;
}
.div1 {
  width: 100%;
  height: 200px;
  background: pink;
}
.sortable-ghost {
  background: red;
}
.sortable-chosen {
  background: #400040;
}
.div2 {
  overflow: hidden;
  margin-bottom: 20px;
}
.div3 {
  width: 300px;
  height: 300px;
  background: yellowgreen;
}
</style>

屬性
value
Array，非必須，默認爲null

用於實現拖拽的list，通常和內部v-for循環的數組爲同一數組。
最好使用vuex來實現傳入。
不是直接使用，而是通過v-model引入。

list
Array，非必須，默認爲null

就是value的替代品。
和v-model不能共用
從表現上沒有看出不同
element
String，默認div

就是<draggable>標籤在渲染後展現出來的標籤類型
也是包含拖動列表和插槽的外部標籤
可以用來兼容UI組件

 

options
Object

配置項

group: string or array 分組用的，同一組的不同list可以相互拖動
sort: boolean 定義是否可以拖拽
delay:number 定義鼠標選中列表單元可以開始拖動的延遲時間
touchStartThreshold:number (不清楚)
disabled: boolean 定義是否此sortable對象是否可用，爲true時sortable對象不能拖放排序等功能
store:
animation: umber 單位:ms 動畫時間
handle: selector 格式爲簡單css選擇器的字符串，使列表單元中符合選擇器的元素成爲拖動的手柄，只有按住拖動手柄才能使列表單元進行拖動
filter: selector 格式爲簡單css選擇器的字符串，定義哪些列表單元不能進行拖放，可設置爲多個選擇器，中間用“，”分隔
preventOnFilter: 當拖動filter時是否觸發event.preventDefault()默認觸發
draggable: selector 格式爲簡單css選擇器的字符串，定義哪些列表單元可以進行拖放
ghostClass: selector 格式爲簡單css選擇器的字符串，當拖動列表單元時會生成一個副本作爲影子單元來模擬被拖動單元排序的情況，此配置項就是來給這個影子單元添加一個class，我們可以通過這種方式來給影子元素進行編輯樣式
chosenClass: selector 格式爲簡單css選擇器的字符串，目標被選中時添加
dragClass:selector 格式爲簡單css選擇器的字符串，目標拖動過程中添加
forceFallback: boolean 如果設置爲true時，將不使用原生的html5的拖放，可以修改一些拖放中元素的樣式等
fallbackClass： string 當forceFallback設置爲true時，拖放過程中鼠標附着單元的樣式
dataIdAttr： data-id
scroll：boolean當排序的容器是個可滾動的區域，拖放可以引起區域滾動
scrollFn：function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用於自定義滾動條的適配
scrollSensitivity: number 就是鼠標靠近邊緣多遠開始滾動默認30
scrollSpeed: number 滾動速度

函數配置

setData: 設置值時的回調函數
onChoose: 選擇單元時的回調函數
onStart: 開始拖動時的回調函數
onEnd: 拖動結束時的回調函數
onAdd: 添加單元時的回調函數
onUpdate: 排序發生變化時的回調函數
onRemove: 單元被移動到另一個列表時的回調函數
onFilter: 嘗試選擇一個被filter過濾的單元的回調函數
onMove: 移動單元時的回調函數
onClone: clone時的回調函數
以上函數對象的屬性： 
to: 移動到的列表的容器
from：來源列表容器
item: 被移動的單元
clone: 副本的單元
oldIndex：移動前的序號
newIndex：移動後的序號
clone
function,默認值: 無處理

這一項要配合着options的group項的pull項處理，當pull:'clone時的拖拽的回調函數’
就是克隆的意思。
可以理解爲正常的拖拽變成了複製。
當爲true時克隆
move
function,默認值:null

就是拖拽項時調用的函數
用來確定拖拽是否生效
返回null時可以生效
可以通過函數判斷
有一個參數:evt 
evt爲object
draggedContext: 被拖拽元素的上下文 
index:拖拽元素的指針
element: 拖拽數據本身
futureIndex: 拖動後的index
relatedContext: 拖入區域的上下文 
index: 目標元素的index
element:目標數據本身
list: 拖入的列表
component:目標組件
 

事件

有以下幾種

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

參數帶有如下屬性：

add: 包含被添加到列表的元素 
newIndex: 添加後的新索引
element: 被添加的元素
removed: 從列表中移除的元素 
oldIndex: 移除前的索引
element: 被移除的元素
moved：內部移動的 
newIndex: 改變後的索引
oldIndex: 改變前的索引
element: 被移動的元素