Vue.Draggable

需求：多个列表中实现拖动
代码：

<div class="groupingMain-item"  v-for="(item, index) in row" :key="index">
 <draggable
  @end="end"
  :id="index"
  :list="item"
  :options="{group:{name: 'people'},chosenClass: 'el-tag--success'}"      
  class="groupingMain-item-tags" >
  ... 
 </draggable>
</div>

import draggable from 'vuedraggable'

end(evt){
  const formRowId = evt.from.id  //原行id
  const toRowId = evt.to.id  //目标行id
  const newIndex = evt.newIndex  //新index
  const oldIndex = evt.oldIndex  //原index
 },

oprions

group: { 
 name: 'draggableList'，//将一个元素从一个列表拖动到另一个列表，必须有相同的name
 pull: 'clone', // true|false|'clone'|function|['list1','list2']; 默认为true，clone为复制元素
 put：true, //true| false| array|['list1','list2'] ; 是否可以从其他列表添加元素，或者指定一个数组，可以从此添加元素，默认为true，
 revertClone：true， // 将一个元素移动到另一个列表之后，将克隆的元素还原到初始位置
}，
 sort: false, //允许在列表中排序
 delay： 0, //何时开始排序
 delayOnTouchOnly： 0, //使用触摸时的延迟ms
 touchStartThreshold： 0，//取消延迟拖动事件之前，点应该移动多少像素
 disabled： false, // 是否禁用排序
 store: null //
 animation: 150, //排序时的动画ms
 easing: "cubic-bezier(1, 0, 0, 1)", // Easing 动画，默认为空，[easing 动画地址](https://easings.net/)
 handle: ".my-handle",  // 拖动手柄选择器，css选择器
 filter: ".ignore-elements",  // 不允许拖动的选择器，字符串或者函数 css选择器
 preventOnFilter: true, // 在调用event.preventDefault()触发filter`
 draggable: ".item",  //指定元素中哪些项可以拖动，css选择器
 dataIdAttr: 'data-id',

ghostClass: "sortable-ghost",  // 占位符类名，添加样式
chosenClass: "sortable-chosen",  // 所选项目的类名，添加样式
dragClass: "sortable-drag",  // 拖动项目类名，添加样式

swapThreshold: 1, // 交换区域占目标的百分比就可以交换，0-1之间浮动，
invertSwap: false, // 当为true则反向交换区域
invertedSwapThreshold: 1, //反向交换的阈值，默认为swapThreshold的值
direction: 'horizontal', // 可排序的方向，'vertical', 'horizontal'
forceFallback: false,  // 忽略HTML5 DnD行为并强制回退，为true则使用H5浏览器的回退
fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名
fallbackOnBody: false,  // 将克隆的DOM元素追加到文档正文中
fallbackTolerance: 0, // 以像素为单位指定鼠标在被视为拖动之前应移动多远。

dragoverBubble: false, // 为true时dragover冒泡到父排序，适用于回退和本地dragover事件，默认为false，Sortable只会在元素插入父Sortable或可以插入父Sortable后停止冒泡事件。1.8版本后可以设置为false，1.8之前设置为true生效
removeCloneOnHide: true, // 为false时，将克隆的元素隐藏，默认为true，则该隐藏克隆元素时从dom删除此元素
emptyInsertThreshold: 5, // 拖动鼠标时，与空可排序表的距离（px），0为禁用


setData: function (dataTransfer, dragEl) {
   dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
},

//已选择元素
onChoose: function (evt) {
   evt.oldIndex;  // 父级元素中的索引
},

// 元素未选择
onUnchoose: function(/**Event*/evt) {
    // same properties as onEnd
},

// 元素拖动开始
onStart: function (evt) {
   evt.oldIndex;  // element index within parent
},

// 元素拖动结束
onEnd: function (/**Event*/evt) {
   var itemEl = evt.item;  // 元素
   evt.to;    // 目标列表
   evt.from;  //原列表
   evt.oldIndex;  // 旧父级中的旧索引
   evt.newIndex;  // 新父级中的新索引
   evt.oldDraggableIndex; //旧父级中可拖动元素的旧索引
   evt.newDraggableIndex; // 新父级中可拖动元素的新索引
   evt.clone // 克隆
   evt.pullMode;  // 当项在另一个可排序表中时：如果是克隆，则为“克隆”；如果是移动，则为“真”

// 元素从另一个列表中拖放到列表中
onAdd: function (evt) {
   // same properties as onEnd
},

// 更改了列表内的排序
onUpdate: function (evt) {
   // same properties as onEnd
},

// 添加更新删除时都会调用
onSort: function (evt) {
   // same properties as onEnd
},

// 元素从一个列表移动到另一个列表
onRemove: function (evt) {
   // same properties as onEnd
},

// 尝试拖动筛选的元素
onFilter: function (evt) {
   var itemEl = evt.item;  // HTMLElement接收“mousedown”tapstart事件
},

// 在列表中或列表之间移动项目时发生的事件
onMove: function (evt, originalEvent) {
   evt.dragged; // dragged HTMLElement
   evt.draggedRect; //dom矩形（left，top，right，bottom）
   evt.related; // HTMLElement on which have guided
   evt.relatedRect; // DOMRect
   evt.willInsertAfter; // 如果为true则默认在元素之后插入
   originalEvent.clientY; //鼠标位置
   // return false; — for cancel 取消
   // return -1; — insert before target 在之前插入
   // return 1; — insert after target在之后插入
},

// 克隆时调用
onClone: function (evt) {
   var origEl = evt.item;
   var cloneEl = evt.clone;
},

// 当拖动元素更改位置时调用
onChange: function(evt) {
   evt.newIndex // 获取拖动元素的当前索引与onEnd属性相同
}