全局拖拽上传文件（类似百度网盘）的实现及踩坑

记录下，开发需求是实现一个类似百度网盘全局拖拽的功能,兼容浏览器，IE0以上。实现思路是，采用原声的拖拽事件。监听window上的dragenter事件，拖拽目标节点是fixed罩住页面的dropZone节点。

监听window上的dragenter事件，显示拖拽的蒙层
监听目标节点dropzone上的拖拽（dragover, dragenter, dragleave, drop）事件。由于dragZone是fixed 到整个页面的，所以在页面全局拖拽时，都会显示蒙层。
drop时，拖拽结束，拿到拖拽的文件

<html><body><style type="text/css">div#dropZone {background: gray;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;opacity: 0.6;visibility: hidden;}.desc{position: absolute;left: 50%;top:50%;}</style><div id="dropZone"><p class="desc">可全局拖拽blablabla的文案</p>  </div><script type="text/javascript">//拖拽的目标节点var dropZone = document.getElementById('dropZone');function showDropZone() {dropZone.style.visibility = "visible";}function hideDropZone() {dropZone.style.visibility = "hidden";}function allowDrag(e) {if (true) {  // Test that the item being dragged is a valid onee.dataTransfer.dropEffect = 'copy';e.preventDefault();}}function handleDrop(e) {e.preventDefault();hideDropZone();alert('Drop!');}// 监听widow上的事件window.addEventListener('dragenter', function(e) {showDropZone();});dropZone.addEventListener('dragenter', allowDrag);dropZone.addEventListener('dragover', allowDrag);dropZone.addEventListener('dragleave', function(e) {hideDropZone();});dropZone.addEventListener('drop', handleDrop);</script></body>

demo跑起来会发现，当拖拽到dragZone的子节点，显示的文字上时，拖拽会失效。按理说，事件应该冒泡到父节点并且能正常拖动才对，但是现实总是这么骨感

搜了很久，搜到一个属性，可完美的解决问题。在文案节点上添加css属性pointer-events:none；MDN上的解释如下：

除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

意思就是，加了这个属性之后，不会触发dom事件，就像一个幽灵，鼠标点击，拖动等等，都是穿透这个元素的。当时看到这个属性，emmmm觉得有文化的人耍起流氓，真的是..一言难尽吧

全局拖拽上传文件（类似百度网盘）的实现及踩坑相关推荐

python 百度云api_Python使用百度API上传文件到百度网盘代码分享
# coding:UTF-8 import urllib import urllib2 __author__ = 'Administrator' from poster.encode import m ...
linux下备份mysql上传到网盘_Linux命令行上传文件到百度网盘
最近在学习 MySQL 的 bin-log 时候考虑到数据备份的问题,突然想到如果能将数据通过 Linux 命令行方式备份到百度网盘,那是一件多么牛逼的事情.百度网盘有免费的 2TB 存储空间,而且有 ...
Linux命令行上传文件到百度网盘
最近在学习 MySQL 的 bin-log 时候考虑到数据备份的问题,突然想到如果能将数据通过 Linux 命令行方式备份到百度网盘,那是一件多么牛逼的事情.百度网盘有免费的 2TB 存储空间,而且有 ...
Linux 通过命令行下载、上传文件到百度网盘（bypy）
文章目录安装配置上传文件下载文件其他用法使用的工具是bypy,github项目地址:https://github.com/houtianze/bypy 安装配置首先安装bypy: pip3 ...
ubuntu上传文件到百度网盘
导语:经常要把一些服务器上的东西或者脚本保存起来,但是下载到本地上传又慢.找了下资料并调整了下.用docker起一个python环境,并挂载需要上传的文件夹,通过bypy上传. docker run ...
linux给百度网盘传文件夹,[转]Linux命令行上传文件到百度网盘
安装软件工具:python apt-get install python-pip pipinstallrequests pipinstall bypy 受权登录:api 执行 bypy info,显示 ...
Linux实现上传文件到百度网盘
一.需要安装的工具: ①. python-pip 注解:pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. ②. requests 注解:reques ...
linux同步到云盘,Linux命令行上传文件到百度网盘
百度云/百度网盘Python客户端github项目系统环境: linux与ma + python3.6 安装依赖包 pip install requests pip install bypy==1. ...
js使用input上传文件夹、拖拽上传文件夹并将文件夹结构展示为树形结构
一.实现效果左侧区域支持选择一个系统中的文件夹,或者将文件夹拖拽到这个区域进行上传,右侧区域可以将文件夹的结构展示为树形结构. 二.代码实现由于需要使用树形插件zTree,这个插件是依赖于jque ...

全局拖拽上传文件（类似百度网盘）的实现及踩坑

全局拖拽上传文件（类似百度网盘）的实现及踩坑相关推荐

最新文章

热门文章