vue(js)拖拽事件的drop失效

排查一个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监听这个事件后做骚操作