VUE拖拽文件碰撞检测draggable

简介：vue拖拽移动操作，比如A文件拖拽移动至B文件夹中，如何检测拖拽到的是B文件夹，draggable插件就可以解决，用法如下：

一：安装

npm install vuedraggable

二：引入

import draggable from "vuedraggable";

三：注册

components: {
    draggable
}

四：使用

//使用draggable标签包裹所有列表元素即可

<draggable>
    tag="div"
    v-bind="getOptionsView()"
    v-model="dataList"
    :move="moveEvent"
    @end="endEvent"

         <div :class="['listArea']" 
                v-for="(item,index) in dataList" :key="item.id" 
         >

</draggable>

draggable上面最新配置说明如下

    tag: 包裹的元素，如果v-for循环的是div，tag就是div，如果是ul，tag：ul

    v-bind="getOptionsView()" : 绑定配置项，如果不实用v-bind，会有一个提醒，最新用法推荐使用v-bind绑定配置项，

   方法：getOptionsList () { return { draggable: '.listArea', animation: 60, } }  其中draggable配置的是可拖拽元素块的类名

五：绑定move属性与end方法

首先定义变量：
dragOrignalItem: null,//移动的原始条目
dragTargetItem: null,//移动的目标条目
dragTargetItemRect: {},


//绑定的moveEvent方法

/**
  * 移动过程中记录鼠标释放时候的点
  * @param evt event事件对象
*/
moveEvent (evt) {
     let event = window.event;
     if (event && event.pointerType && event.pointerType === "touch") return;
     //记录移动的条目和目标条目
     if (evt.draggedContext && evt.relatedContext && evt.draggedContext.element && evt.relatedContext.element) {
            this.dragOrignalItem = evt.draggedContext.element;
            this.dragTargetItem = evt.relatedContext.element;
            this.dragTargetItemRect = evt.relatedRect;
     } else {
            this.dragOrignalItem = null;
            this.dragTargetItem = null;
            this.dragTargetItemRect = {};
     }
     return false;
},



//绑定的end方法
/**
  * 记录移动结束位置
  * @param evt event事件对象
*/
endEvent (evt) {
      if (this.dragTargetItem == null) return;
      // let event = window.event;
      // console.log("拖动元素与目标元素", this.dragOrignalItem, this.dragTargetItem);
      //TODO 处理自己的业务逻辑 
},

六：结果

根据上面endEvent方法执行后的结果，我们可以知道拖动元素和目标元素，知道目标元素六，就可以处理自己的业务逻辑了

交流

1、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

2、可添加 微信群 或 关注微信公众号 共同进阶学习：扫码入群