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

shiguibiao 发布于2019-08-26 11:41 / 650人阅读

摘要：记录下，开发需求是实现一个类似百度网盘全局拖拽的功能兼容浏览器，以上。监听上的事件，显示拖拽的蒙层监听目标节点上的拖拽事件。

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

监听window上的dragenter事件，显示拖拽的蒙层

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

drop时，拖拽结束，拿到拖拽的文件


    
        
        
          可全局拖拽blablabla的文案

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

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

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

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

GPU云服务器云服务器 php拖拽上传大文件百度网盘bt文件怎么打开 js实现数据的拖拽百度网盘和阿里云服务器的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107374.html

webpack入门及踩坑应对指南

摘要：的使用为什么使用前端需要工程化工程化的概念小作坊流水线流水线的特点自动化，模块化性能优化自动化就是命令行操作，一行命令实现多个功能，例如自动监听变化，自动翻译源代码到打包代码库里面文件复杂多样文件多变化快将各种文件集 webpack的使用为什么使用webpack 1.前端需要工程化工程化的概念：小作坊 -> 流水线流水线的特点：自动化，模块化、性能优化自动化就是命令行操作，一行...

ky0ncheng 2019-08-22 16:20 评论0 收藏0
vue-cli3.x 新特性及踩坑记

摘要：前言都到了，所以是时候玩转一下的新特性了。安装的包名称由改成了。方法一原因的配置改变了，导致正确的不能用。打开终端，切换到根路径文件里面修改为方法二是默认路径修改了路径会出现错误。按上面的方法修改完，再全局卸载果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 评论0 收藏0
百度网盘文件夹框选功能

摘要：案例说明使用原生完成桌面操作级应用，对于原生的掌握情况而言，是一个较为全面的综合型案例。本次课从事件相关的功能入手，给大家带来详细的分享。 showImg(https://segmentfault.com/img/bVbh1qw); 案例说明：使用原生 JS 完成桌面操作级应用，对于原生 JS 的掌握情况而言，是一个较为全面的综合型案例。本次课从事件（event）相关的功能入手，给大家...

jkyin 2019-08-29 16:55 评论0 收藏0
开箱即用-简洁实用的ImgURL图床相册程序和Zdir目录列表程序(文件管理器）

摘要：本篇文章就来分享一下两款开箱即用上手容易的图床相册程序和在线文件管理器目录列表程序，由好友开发并维护，非常适合个人站长用作图床相册和文件下载分享。虽然说现在照片还有文件存储等都可以上传到网盘中，但是国内的网盘与国外的网盘存储还有点不一样。以百度网盘与Dropbox对比为例，百度网盘顶多算是一个个人用来存放私人照片和文件的网络硬盘，如果用来分享的话很容易被百度限制或者取消下载。很多的个人站长为...

番茄西红柿 2021-07-30 14:58 评论0 收藏2637