安装

  1. npm i -S vuedraggable

使用

页面引入
  1. import draggable from 'vuedraggable'

页面使用
  1. <draggable :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
  2.               v-model="list2"
  3.               @change="change"
  4.               @start="start"
  5.               @end="end"
  6.               :move="move"
  7.               style="display: inline-block; width:190px;height: 200px;background: #eee;overflow: auto">
  8.             <li v-for="(item, index) in list2"
  9.                 :class="setclass(item,index)"
  10.                 :key="index">
  11.               {{item.name}}
  12.             </li>
  13.           </draggable>

事件
  1. //evt里面有两个值，一个evt.added 和evt.removed  可以分别知道移动元素的ID和删除元素的ID
  2.     change: function (evt) {
  3.       console.log(evt)
  4.     },
  5.     //start ,end ,add,update, sort, remove 得到的都差不多
  6.     start: function (evt) {
  7.       console.log(evt)
  8.     },
  9.     end: function (evt) {
  10.       console.log(evt)
  11.       evt.item //可以知道拖动的本身
  12.       evt.to    // 可以知道拖动的目标列表
  13.       evt.from  // 可以知道之前的列表
  14.       evt.oldIndex  // 可以知道拖动前的位置
  15.       evt.newIndex  // 可以知道拖动后的位置
  16.     },
  17.     move: function (evt, originalEvent) {
  18.       console.log(evt)
  19.       console.log(originalEvent) //鼠标位置
  20.     }

属性
  1. group: "name",  // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
  2.   sort: true,  // 内部排序列表
  3.   delay: 0, // 以毫秒为单位定义排序何时开始。
  4.   touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
  5.   disabled: false, // 如果设置为真，则禁用sortable。
  6.   store: null,  // @see Store
  7.   animation: 150,  // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
  8.   handle: ".my-handle",  // 在列表项中拖动句柄选择器。
  9.   filter: ".ignore-elements",  // 不导致拖拽的选择器(字符串或函数)
  10.   preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
  11.   draggable: ".item",  // 指定元素中的哪些项应该是可拖动的。
  12.   ghostClass: "sortable-ghost",  // 设置拖动元素的class的占位符的类名。
  13.   chosenClass: "sortable-chosen",  // 设置被选中的元素的class
  14.   dragClass: "sortable-drag",  //拖动元素的class。
  15.   dataIdAttr: 'data-id',
  16.   forceFallback: false,  // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响）
  17.   fallbackClass: "sortable-fallback",  // 使用forceFallback时克隆的DOM元素的类名。
  18.   fallbackOnBody: false,  // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级）
  19.   fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。
  20.   scroll: true, // or HTMLElement
  21.   scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
  22. scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  23.   scrollSpeed: 10, // px

slot

使用footer插槽在vuedraggable组件内添加不可拖动的元素。重要:它应该与可拖动选项一起使用，以标记可拖拽元素。注意，在默认情况下，页脚槽将始终被添加

  1. <draggable v-model="myArray" :options="{draggable:'.item'}">
  2.     <div v-for="element in myArray" :key="element.id" class="item">
  3.         {{element.name}}
  4.     </div>
  5.     <button slot="footer" @click="addPeople">Add</button>
  6. </draggable>

详情参考：
Vue.Draggable https://github.com/SortableJS/Vue.Draggable
Sortable https://github.com/RubaXa/Sortable