简介：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方法执行后的结果，我们可以知道拖动元素和目标元素，知道目标元素六，就可以处理自己的业务逻辑了
交流
可添加qq群共同进阶学习：进军全栈工程师疑难解 群号: 856402057
对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！欢迎关注公众号共同学习。
