Vue 实现拖拽排序 vuedraggable插件

官方地址：https://sortablejs.github.io/Vue.Draggable/#/simple

Github：https://github.com/SortableJS/Vue.Draggable

Demo：https://david-desmaisons.github.io/draggable-example/

简单使用：https://www.jb51.net/article/151782.htm

https://blog.csdn.net/zhaoxiang66/article/details/81003094

首先在vue项目中，用npm包下载下来

npm install vuedraggable -S

下载下来后，引入插件，在你的vue文件的script标签里面这样引入

import draggable from 'vuedraggable'

注册组件

components: {
    draggable
},

vuedraggable.common.js?bb80:2942 Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind.  出现警告 :options (选项道具已经弃用)  改成 v-bind

options配置如下

group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
  sort: true,  // 内部排序列表
  delay: 0, // 以毫秒为单位定义排序何时开始。
  touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
  disabled: false, // 如果设置为真，则禁用sortable。
  store: null,  // @see Store
  animation: 150,  // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
  handle: ".my-handle",  // 在列表项中拖动句柄选择器。
  filter: ".ignore-elements",  // 不导致拖拽的选择器(字符串或函数)
  preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
  draggable: ".item",  // 可拖拽item的class名
  ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。
  chosenClass: "sortable-chosen",  // 设置被选中的元素的class
  dragClass: "sortable-drag",  //拖动元素的class。
  dataIdAttr: 'data-id',

  forceFallback: false,  // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响）
  fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名。
  fallbackOnBody: false,  // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级）
  fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。

  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

setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
    dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
  },
 
  // Element is chosen
  onChoose: function (/**Event*/evt) {
    evt.oldIndex; // element index within parent
  },
 
  // Element dragging started
  onStart: function (/**Event*/evt) {
    evt.oldIndex; // element index within parent
  },
 
  // Element dragging ended
  onEnd: function (/**Event*/evt) {
    var itemEl = evt.item; // dragged HTMLElement
    evt.to;  // target list
    evt.from; // previous list
    evt.oldIndex; // element's old index within old parent
    evt.newIndex; // element's new index within new parent
  },
 
  // Element is dropped into the list from another list
  onAdd: function (/**Event*/evt) {
    // same properties as onEnd
  },
 
  // Changed sorting within list
  onUpdate: function (/**Event*/evt) {
    // same properties as onEnd
  },
 
  // Called by any change to the list (add / update / remove)
  onSort: function (/**Event*/evt) {
    // same properties as onEnd
  },
 
  // Element is removed from the list into another list
  onRemove: function (/**Event*/evt) {
    // same properties as onEnd
  },
 
  // Attempt to drag a filtered element
  onFilter: function (/**Event*/evt) {
    var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
  },
 
  // Event when you move an item in the list or between lists
  onMove: function (/**Event*/evt, /**Event*/originalEvent) {
    // Example: http://jsbin.com/tuyafe/1/edit?js,output
    evt.dragged; // dragged HTMLElement
    evt.draggedRect; // TextRectangle {left, top, right и bottom}
    evt.related; // HTMLElement on which have guided
    evt.relatedRect; // TextRectangle
    originalEvent.clientY; // mouse position
    // return false; — for cancel
  },
 
  // Called when creating a clone of element
  onClone: function (/**Event*/evt) {
    var origEl = evt.item;
    var cloneEl = evt.clone;
  }

然后会出现这个问题 transition-group 内绑定key index无效

:key="'my-name'+index" 就可以了