vuedraggable拖拽任意组件并改变数据排序

vuedraggable是一个非常强大的第三方组件，他可以支持任意组件的拖拽，以及拖拽时的样式，是否允许拖拽等等。

1 . 下载

npm i vuedraggable

2 . 在需要的页面引入(也可全局引入看自己需求)

import Vuedraggable from 'vuedraggable'
  export default {
    components: {
      Vuedraggable
   }
}

3 . 用法

<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" :move="onMove" filter=".nodeActive" @add='add' @unchoose='onUnchoose'>
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

• 以下为可选属性
  
• 以下为事件
  
• move 自定义控制那些元素可以拖拽或不允许拖拽，实际业务场景往往会比较复杂，往往在拖拽过程中才能知道那些元素允许停靠，点击时才知道那些元素是否允许拖拽

//move回调方法
onMove(e,originalEvent){ 
         console.log(e);
         console.log(originalEvent);
         //false表示阻止拖拽
         return true;
  },  
//e对象结构
draggedContext: 被拖拽的元素
      index: 被拖拽的元素的序号
      element: 被拖拽的元素对应的对象
      futureIndex: 预期位置、目标位置
relatedContext: 将停靠的对象
      index: 目标停靠对象的序号
      element: 目标的元素对应的对象
      list:  目标数组
      component: 将停靠的vue组件对象

• 有一次使用时我碰到一个很困惑的bug，比如说key值绑定的element.id，但控制台会出现报错提示
  
  我瞬间就很疑惑，吓得我赶紧去看了眼返回数据，id明明都建在也没有重复，没事id用不了我就用索引代替，虽然会影响点性能但影响基本可以忽略不计，然后就出现了另一个问题
  
  我直呼好家伙，今天是不是故意针对本搬运工，没办法，本API搬运工水平暂时有限，我去搬下救兵

<!-- 此处为index拼接了一个额外的标识，用任意东西做标识都可以 -->
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false" :move="onMove" filter=".nodeActive" @add='add' @unchoose='onUnchoose'>
   <div v-for="(element, index)  in myArray" :key="`${index}-h`">{{element.name}}</div>
</draggable>

不建议使用index作为索引，另外如果拖拽对象是一个tabber表格那么需要加入row-key来作为表格的标识，防止数据混乱

总觉得自己的描述没有那么清晰，还是留下个-- 传送门 --
在里面有大量的模拟数据供大家进行网页上的实践，支持在线运行的哦。
最后，如果大家也碰到了同样的问题或者知道问题出现的原因，欢迎留言，提前谢谢大家了