官方示例：https://david-desmaisons.github.io/draggable-example/
1.安裝
npm install vuedraggable
或者使用鏡像安裝
cnpm install vuedraggable
2.使用
首先在使用的組件中引入
import draggable from 'vuedraggable'
接著在組件中注冊
components: {
draggable
}
頁面使用
<draggable :options="{animation:380}"
v-model="dataList"
@change="change"
@start="start"
@end="end"
:move="move">
<li v-for="(item, index) in dataList" :class="setclass(item,index)" :key="index">
{{item.name}}
</li>
</draggable>
事件
<script>
methods:{
//evt里面有兩個值旷偿，一個evt.added 和evt.removed 可以分別知道移動元素的ID和刪除元素的ID
change (evt) {
console.log(evt)
},
//start ,end ,add,update, sort, remove 得到的都差不多
start (evt) {
console.log(evt)
},
end (evt) {
console.log(evt)
evt.item //可以知道拖動的本身
evt.to // 可以知道拖動的目標列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖動前的位置
evt.newIndex // 可以知道拖動后的位置
},
move (evt, originalEvent) {
console.log(evt)
console.log(originalEvent) //鼠標位置
}
}
</script>
option屬性配置
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的組可以互相拖動
sort: true, // 內(nèi)部排序列表
delay: 0, // 以毫秒為單位定義排序何時開始邻梆。
touchStartThreshold: 0, // px,在取消延遲拖動事件之前，點應(yīng)該移動多少像素?
disabled: false, // 如果設(shè)置為真滑肉，則禁用sortable一姿。
store: null, // @see Store
animation: 150, // ms, 動畫速度運動項目排序時七咧，' 0 ' -沒有動畫跃惫。
handle: ".my-handle", // 在列表項中拖動句柄選擇器。
filter: ".ignore-elements", // 不導致拖拽的選擇器(字符串或函數(shù))
preventOnFilter: true, // 調(diào)用“event.preventDefault()”時觸發(fā)“filter”
draggable: ".item", // 指定元素中的哪些項應(yīng)該是可拖動的艾栋。
ghostClass: "sortable-ghost", // 設(shè)置拖動元素的class的占位符的類名爆存。
chosenClass: "sortable-chosen", // 設(shè)置被選中的元素的class
dragClass: "sortable-drag", //拖動元素的class。
dataIdAttr: 'data-id',
forceFallback: false, // 忽略HTML5的DnD行為蝗砾，并強制退出先较。（h5里有個屬性也是拖動，這里是為了去掉H5拖動對這個的影響）
fallbackClass: "sortable-fallback", // 使用forceFallback時克隆的DOM元素的類名悼粮。
fallbackOnBody: false, // 將克隆的DOM元素添加到文檔的主體中闲勺。（默認放在被拖動元素的同級）
fallbackTolerance: 0, // 用像素指定鼠標在被視為拖拽之前應(yīng)該移動的距離。
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px
slot
使用footer插槽在vuedraggable組件內(nèi)添加不可拖動的元素矮锈。重要:它應(yīng)該與可拖動選項一起使用霉翔，以標記可拖拽元素。注意苞笨，在默認情況下债朵，頁腳槽將始終被添加
<draggable v-model="myArray" :options="{draggable:'.item'}">
<div v-for="element in myArray" :key="element.id" class="item">
{{element.name}}
</div>
<button slot="footer" @click="addPeople">Add</button>
</draggable>
如果項目報警告
vue Do not use v-for index as key on <transition-group> children, this is the same as not using keys
報錯的意思是：在<transition-group>子元素上，不要使用v-for索引作為鍵瀑凝，否則與不使用鍵相同
解決辦法： 把你列表循環(huán) :key=“index” index可以換成 id 或者 給Index 隨便加個數(shù)字 :key="item.id" 或者 :key="index + 10"
詳情參考：
Vue.Draggable https://github.com/SortableJS/Vue.Draggable
Sortable https://github.com/RubaXa/Sortable
