以前項(xiàng)目用過vue-draggable曙聂，可是并沒有把學(xué)習(xí)資料記錄下來(lái)，最近項(xiàng)目又要用到draggable鞠鲜，所以寫了這篇文章宁脊。
安裝
npm i -S vuedraggable
使用
頁(yè)面引入
import draggable from 'vuedraggable'
頁(yè)面使用
<draggable :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
v-model="list2"
@change="change"
@start="start"
@end="end"
:move="move"
style="display: inline-block; width:190px;height: 200px;background: #eee;overflow: auto">
<li v-for="(item, index) in list2"
:class="setclass(item,index)"
:key="index">
{{item.name}}
</li>
</draggable>
事件
//evt里面有兩個(gè)值，一個(gè)evt.added 和evt.removed 可以分別知道移動(dòng)元素的ID和刪除元素的ID
change: function (evt) {
console.log(evt)
},
//start ,end ,add,update, sort, remove 得到的都差不多
start: function (evt) {
console.log(evt)
},
end: function (evt) {
console.log(evt)
evt.item //可以知道拖動(dòng)的本身
evt.to // 可以知道拖動(dòng)的目標(biāo)列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖動(dòng)前的位置
evt.newIndex // 可以知道拖動(dòng)后的位置
},
move: function (evt, originalEvent) {
console.log(evt)
console.log(originalEvent) //鼠標(biāo)位置
}
屬性
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的組可以互相拖動(dòng)
sort: true, // 內(nèi)部排序列表
delay: 0, // 以毫秒為單位定義排序何時(shí)開始贤姆。
touchStartThreshold: 0, // px,在取消延遲拖動(dòng)事件之前榆苞，點(diǎn)應(yīng)該移動(dòng)多少像素?
disabled: false, // 如果設(shè)置為真，則禁用sortable庐氮。
store: null, // @see Store
animation: 150, // ms, 動(dòng)畫速度運(yùn)動(dòng)項(xiàng)目排序時(shí)语稠，' 0 ' -沒有動(dòng)畫。
handle: ".my-handle", // 在列表項(xiàng)中拖動(dòng)句柄選擇器弄砍。
filter: ".ignore-elements", // 不導(dǎo)致拖拽的選擇器(字符串或函數(shù))
preventOnFilter: true, // 調(diào)用“event.preventDefault()”時(shí)觸發(fā)“filter”
draggable: ".item", // 指定元素中的哪些項(xiàng)應(yīng)該是可拖動(dòng)的仙畦。
ghostClass: "sortable-ghost", // 設(shè)置拖動(dòng)元素的class的占位符的類名。
chosenClass: "sortable-chosen", // 設(shè)置被選中的元素的class
dragClass: "sortable-drag", //拖動(dòng)元素的class音婶。
dataIdAttr: 'data-id',
forceFallback: false, // 忽略HTML5的DnD行為慨畸，并強(qiáng)制退出。（h5里有個(gè)屬性也是拖動(dòng)衣式，這里是為了去掉H5拖動(dòng)對(duì)這個(gè)的影響）
fallbackClass: "sortable-fallback", // 使用forceFallback時(shí)克隆的DOM元素的類名寸士。
fallbackOnBody: false, // 將克隆的DOM元素添加到文檔的主體中。（默認(rèn)放在被拖動(dòng)元素的同級(jí)）
fallbackTolerance: 0, // 用像素指定鼠標(biāo)在被視為拖拽之前應(yīng)該移動(dòng)的距離碴卧。
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px
slot
使用footer插槽在vuedraggable組件內(nèi)添加不可拖動(dòng)的元素弱卡。重要:它應(yīng)該與可拖動(dòng)選項(xiàng)一起使用，以標(biāo)記可拖拽元素住册。注意婶博，在默認(rèn)情況下，頁(yè)腳槽將始終被添加
<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.Draggable https://github.com/SortableJS/Vue.Draggable
Sortable https://github.com/RubaXa/Sortable
