简介: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、可添加 微信群 或 关注微信公众号 共同进阶学习:扫码入群