vue 拖拽组件

1. 安装

yarn add vuedraggable
npm i -S vuedraggable

2. 使用

注册组件

import draggable from 'vuedraggable'

//注册draggable组件
components: {
    draggable,
},

模版内使用

<!--使用draggable组件 v-model绑定数组-->
 <draggable v-model="myArray"  @start="onStart" @end="onEnd">
     <transition-group>
         <div class="item" v-for="item in myArray" :key="item.id">{{item.name}}</div>
     </transition-group>
 </draggable>

3. 重要属性

• disabled： 开启和禁用拖动
• group： 拖拽分组多组之间相互拖拽，可以实现不同数组之间相互拖拽。

//设置方式一，直接设置组名 group:'itxst' //设置方式，object，也可以通过自定义函数function实现复杂的逻辑 group:{ name:'itxst',//组名为itxst pull: true|false| 'clone'|array|function,//是否允许拖出当前组 put:true|false|array|function,//是否允许拖入当前组 }

• clone：拷贝实现常用菜单功能，从一个拖拽组拖动到另外一个组而原来的那种组的元素不移除。

4. 事件

• 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组件对象

• add

从A组拖动到B组完成的事件,当当前网页只有一页时不会触发该事件。

• start

开始拖动时的事件。