npm i -S vuedraggable

import draggable from 'vuedraggable'

components:{
? ? ? draggable
? ? },

<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"
? ? ? ? ? :key="index">
? ? ? ? {{item.name}}
? ? ? </li>
</draggable>

list2:[{value:1,name:"中國(guó)"},{value:1,name:"中國(guó)"},{value:1,name:"中國(guó)"}],

//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í)開(kāi)始。
? touchStartThreshold: 0, // px,在取消延遲拖動(dòng)事件之前，點(diǎn)應(yīng)該移動(dòng)多少像素?
? disabled: false, // 如果設(shè)置為真，則禁用sortable。
? store: null, ?// @see Store
? animation: 150, ?// ms, 動(dòng)畫(huà)速度運(yùn)動(dòng)項(xiàng)目排序時(shí)，' 0 ' -沒(méi)有動(dòng)畫(huà)。
? 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的占位符的類(lèi)名。
? 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元素的類(lèi)名。
? 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

<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>