vue.draggable注意事项

前言

最近再项目中使用拖拽功能比较多所以就记录一下踩坑

vue2 中使用draggable 最恶心的就是要获取到当前的操作元素 。 因为我这边的逻辑左边的菜单向右边面板进行拖拽 所以不会触发move 方法 但是我还要获取当前拖动元素 所以就比较恶心
文档连接地址
https://www.itxst.com/vue-draggable/tutorial.html

获取数据方法

根据自己的调试发现获取当前的元素的方法
1.使用个拖拽容器 A(from), B (to)
A上面绑定move 方法 A—> B
触发A上面的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组件对象

2.使用_underlying_vm_ 再onEnd 中监听方法 evt.item.underlying_vm 应该是底层在使用这个获取当前的数据 文档中也为提及
3.使用h5自定义属性

 <draggable
 :touchStartThreshold="10"
  :group="{name: 'chartComm', pull:'clone', put:false }"
  :sort="false"
  :list="widget.list"
  @end="evt => widgetOnDragged(evt)"
>
  <div class="tools-item" 
    :data-code="item.code"
    v-for="item in widget.list" :key="item.code"
    :code="item.code"
  >
    <span class="tools-item-icon">
      <i class="iconfont" :class="item.icon"></i>
    </span>
    <span class="tools-item-text">{{ item.label }}</span>
  </div>
</draggable>

evt.clone.dataset 中获取到 code 属性再通过js的方法去查找或者直接传递一个object 直接使用