安裝
npm i -S vuedraggable
使用
頁面引入
import draggable from 'vuedraggable'
頁面使用
<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)情況下鼓鲁，頁腳槽將始終被添加
<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
原文
作者：this_smile
鏈接：http://www.reibang.com/p/03f0f58f84cc
