vue(js)拖拽事件的drop失效
排查drop的一个bug过程
·
排查一个BUG:
系统内文件拖拽至目标区域drop事件监听失效
排查过程:
本地写了个小demo,发现直接写drop事件是不可以的,需要这么改👇
在对应的div上加这两个事件的阻止默认动作
@dragenter.prevent
@dragover.prevent
demo加上好用后,大那是在项目中这么改并不好使,有点难受。所以这个解决方案的场景和我不同
大部分场景上面就可以解决了,下面是我自己在项目中遇到的问题以及解决过程!!!
其他原因尝试:
- 怀疑dom遮挡,因为有个函数是通过监听dragenter添加了一层遮罩。对遮罩进行v-if=false。发现还是没用,那就再换一个思路。
- 由于项目代码较多,目标div下有多个组件都是用了拖拽等事件,所以先把组件引用注释掉。在注释后发现还是没有解决
- 代码版本回退至半年之前,拖拽上传是好用的,并且自身组件并没有改动
通过上面这三点了解到不是自身原因,和冲突等无关,那么只剩最后一个待排查的地方了
那就是项目文档的文件拖拽封装了一个js,代码较多需要简单阅读下
排查项目封装好的drag.js
发现有一个不对劲的地方:
殴嚯,怎么这里有一个window全局监听了dragover呢?
我直接赶忙去看这个方法里面写了什么
好家伙,方法中有一个判断执行 dropEffect=none
给不知道dropEffect的科普下:
如果dropEffect 属性设定为none,则不允许被拖放到目标元素 中
dropEffect详情
这个方法的注释写的和这个函数功能不太一致啊,注释写的是注销tips移入展示的,但是里面有dragover不在指定el会禁止拖放目标元素。我滴天,下次如果再排查这个事件 先看看有没有人在window.addevent中加骚操作
所以之后再他指定el中添加自己目标元素的el即可,这属于是加了个限制把我的功能给排除出去了,哭死 我还以为是什么别的高大上的原因
总结:
在项目中如果有事件不正常生效等,可以先看看有没有人对window监听这个事件后做骚操作
更多推荐
已为社区贡献9条内容
所有评论(0)