vue中vuedraggable 拖拽列表的使用 vuedraggable踩坑之路

经历了一些奇奇怪怪的问题我终于从vuedraggable的各种坑中爬出来了！！
接下来我来总结一下它的使用

【想看官网的这里来】
vue中draggable拖拽列表的使用
https://github.com/SortableJS/Vue.Draggable

官方示例：

https://sortablejs.github.io/Vue.Draggable/#/transition-example-2

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

【以下是我自己的用法】
安装引入，已经ok的可以直接跳过这个部分

1. 安装

npm install vuedraggable  

或者使用镜像安装

cnpm install vuedraggable  

2. 使用
   首先在使用的组件中引入

import draggable from 'vuedraggable'

3. 接着在组件中注册

components: { 
  draggable
}

4. 使用

 <draggable
      @end="endRemove"
      @change="handleRemove"
      :animation="500"
      group="tasklist"
      :disabled="this.disabled"
      ghostClass="ghost"
      element="ul"
      v-model="taskGroupInfo.task_list"
      class="kanban-box-list"
      :id="`tasklist-${taskGroupInfo.process_id}`"
      filter=".forbid"
      :style="kanbanListStyle"
    >
	 <li
        v-for="item in taskGroupInfo.task_list"
        @click="showTaskInfo(item)"
        :data-task-sort="item.task_id"
        :id="item.task_id"
        :key="`${taskGroupInfo.process_id}_${item.task_id}`"
      >
          {{ item.task_name }}
      </li>
    </draggable>

    //拖拽任务
    handleRemove(evt) {
      console.log(evt, "change....");
    },
    //拖拽任务
    endRemove(evt) {
    //这里自由发挥吧，我是把数据的id直接作为标签的id的值了，比较好获取数据
      if (evt.from.i == evt.to.id) {
        this.reloadInfo();
        return;
      }
      // evt.item; //可以知道拖动的本身
      // evt.to; // 可以知道拖动的目标列表
      // evt.from; // 可以知道之前的列表
      // evt.oldIndex; // 可以知道拖动前的位置
      // evt.newIndex; // 可以知道拖动后的位置
    },
 

• change事件 中的 evt

evt里面有两个值，一个evt.added 和evt.removed 可以分别知道移动元素和删除元素

• end事件 中的evt

 end (evt) {
          console.log(evt)
          evt.item //可以知道拖动的本身
          evt.to    // 可以知道拖动的目标列表
          evt.from  // 可以知道之前的列表
          evt.oldIndex  // 可以知道拖动前的位置
          evt.newIndex  // 可以知道拖动后的位置
},

• 还有start和move事件，用法类似

start (evt) { 
      console.log(evt)
  },
move (evt, originalEvent) {
      console.log(evt)
      console.log(originalEvent) //鼠标位置
  }

5. 配置项
   不要怕麻烦哦，也可都尝试一下

 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",  // 指定元素中的哪些项应该是可拖动的。
 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) { ... }
 scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
 scrollSpeed: 10, // px

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

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

参考链接：https://www.jianshu.com/p/9c266721ca1b