浅谈浏览器的原生拖拽事件

虽然之前有写过模拟浏览器拖拽行为的组件,但这种拖拽仅限于改变 DOM 元素的位置,只是 UI 层面的交互效果。最近在做的拖拽上传文件,拖拽时需要和服务端进行数据层面的交互,此时就需要用到浏览器原生的拖拽事件。

在高级浏览器中,DOM 元素都有一个 draggable 属性,用于标记其是否可以在浏览器中拖拽,常见的 a 、img 元素的 draggable 默认值为 true,浏览器默认其是可以拖拽的,而其他的布局元素如 div、p 这些默认并不支持拖拽,所以值是 false,如果想让其可以拖动,需要先将其设置成 true。

再来看看原生的拖拽相关的事件类型:

  • drag : 元素被拖拽时由拖拽元素频繁触发的事件(每隔几百毫秒就会触发一次)
  • dragstart : 拖拽时开始时由拖拽元素触发的事件
  • dragend : 拖拽结束时触发由拖拽元素的事件
  • dragover : 当拖拽元素进入放置区域时由放置元素频繁触发的事件(每隔几百毫秒就会触发一次)
  • dragenter : 当拖拽元素进入放置区域时由放置元素触发的事件
  • dragleave : 当拖拽元素离开放置区域时由放置元素触发的事件
  • drop : 当拖拽元素在放置区域放置时由放置元素触发的事件

将一个文件拖拽并放置到浏览器中,浏览器默认会触发 drop 事件,为了阻止浏览器默认的放置事件,需要在 dragover 和 drop 事件中进行阻止。

在 IE10 以下的浏览器中,并不是完全不支持,只是支持程度有限,没有可玩性,这里就不多说了。

在高级浏览器中拖拽事件接口的对象中都有一个高级对象 dataTransfer,拖拽的数据就保存在这个对象中,正因为拖拽时能传递数据才有了可玩性,可见该对象的重要程度。HTML5 中关于拖拽相关的高级功能都是通过该对象来实现的。

常见的拖拽上传需要从系统向浏览器拖进一个文件,该文件就保存在 dataTransfer 中,在放置的时候就可以通过该对象来读取文件,代码如下:


    document.addEventListener( 'dragover', function( e ){
        // 阻止默认事件的触发
        e.preventDefault();
    }, false );

    document.addEventListener( 'drop', function( e ){
        var dt = e.dataTransfer,
            item, reader;

        // 阻止默认事件的触发
        e.preventDefault();

        if( dt && dt.files ){
            item = dt.files[0];

            // 通过使用FileReader构造器来读取该文件
            reader = new FileReader();

            // 读取文件后将base64的数据传递给隐藏的输入框并做提交
            reader.onload = function( e ){
                // e.target.result 中就包含了读取到的文件信息           
            };

            // 读取文件
            reader.readAsDataURL( item );
        }
    }, false );

上面是从系统向浏览器拖入文件的处理方法,那么对于页面中本身存在的元素,该如何处理呢?

HTML5 的 dataTransfer 对象在各高级浏览器中的表现还是有所差异的,比如对于直接拖拽页面中的图片然后读取图片信息,有些浏览器并不支持,或者是太麻烦,我就没去做尝试了,如果有深究过的可以告诉我。

在页面中的图片,本身都有一个 URL,在开始拖拽的时候将拖拽的数据设置成图片的 URL,然后在放置的时候读取这个 URL,最后将这个 URL 提交给服务端,让服务端去下载该图即可。

在拖拽开始时使用 setData 方法设置拖拽数据为图片的 URL:


    <img src="http://example.com/test.jpg" alt="" id="testImg" />

    var testImg = document.getElementById( 'testImg' );

    testImg.addEventListener( 'dragstart', function( e ){
        var dt = e.dataTransfer;

        if( dt ){
            // 将图片的URL设置成拖拽数据的文本类型
            dt.setData( 'text', this.src );
        }
    }, false );

在放置的时候使用 getData 方法来获取数据:


    document.addEventListener( 'drop', function( e ){
        var dt = e.dataTransfer,
            src;

        if( dt ){
            src = dt.getData( 'text' );

            // 将 URL 提交给服务端
        }
    }, false );

如果 img 标签包含在 a 标签中,想让这些图片元素也支持拖拽传递图片 URL,需要给 a 元素绑定 dragstart 事件,然后使用 setData 方法将图片的 URL 存储进去。因为 a 元素默认拖拽的时候传递的是其自身的链接。

高级浏览器在使用 setData、getData 方法在设置和读取拖拽的数据类型时都支持好几种数据格式,常见的如 text/plain,而唯独 IE10 只支持 text 格式,为了兼容性,没有特殊情况的话还是得老老实实设置成 text 格式。

有了 setData、getData 方法,就可以在拖拽和放置时很方便的传递数据,高级浏览器支持的类型更多,有更多的可能。

Chrome 81 正式发布 !消灭混合内容最后一步~

Chrome 81 于前天正式发布了,这个版本其实最初是计划在 3 月 17 号 发布的,但由于冠状病毒(COVID-19)爆发而导致推迟到了现在。Chrome 81 的延迟也扰乱了 Google 正常的六周发布时间表。因此 Google 此前也宣布,下一个版本将直接跳过 Chrome 82 ,直接发布 Chrome 83。 下面我就来带大家看看 Chrome 81 有哪些重要的更新。

发布于:11月以前  |  1027次阅读  |  详细内容 »

花椒前端基于 Docker 的 SSR 持续开发集成环境实践

发布于:11月以前  |  936次阅读  |  详细内容 »

当浏览器全面禁用三方 Cookie

苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行追踪。而微软和 Mozilla 等也纷纷采取了措施禁用第三方 Cookie,但是由于这些浏览器市场份额较小,并没有给市场带来巨大的冲击。

发布于:11月以前  |  958次阅读  |  详细内容 »

H5 直播的疯狂点赞动画是如何实现的?

直播有一个很重要的互动:点赞。 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出来(广播用户使用websocket消息)

发布于:11月以前  |  975次阅读  |  详细内容 »

探索 Serverless 中的前端开发模式

最近关于 Serverless 的讨论越来越多。看似与前端关系不大的 Serverless,其实早已和前端有了渊源,并且将对前端开发模式产生变革性的影响。本文主要就根据个人理解和总结,从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。本人也有幸在 QCon2019 分享了这一主题。

发布于:11月以前  |  1018次阅读  |  详细内容 »

聊一下 Chrome 新增的可信类型(Trusted types)

Chrome 即将在 83 版本新增一个可信类型(Trusted types),其号称这一特性可以全面消除 DOM XSS,为此我连夜分析了一波,下面我就带大家来具体看一下这个特性:

发布于:11月以前  |  1217次阅读  |  详细内容 »

前端需要了解的9种设计模式

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。

发布于:11月以前  |  967次阅读  |  详细内容 »

为什么你的网页需要 CSP?

内容安全策略(CSP)是一个 HTTP Header,CSP 通过告诉浏览器一系列规则,严格规定页面中哪些资源允许有哪些来源, 不在指定范围内的统统拒绝。

发布于:11月以前  |  972次阅读  |  详细内容 »

10 种跨域解决方案(附终极方案)

嗯。又来了,又说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了解底层啊,不是很简单吗。但是最近在开发一个 「vscode 插件」 发现,当你刚入门一样东西的时候,你不会想这么多,因为你对他不熟悉,当你遇到不会的东西,你就是想先找到解决方案,然后通过这个解决方案再去深入理解。

发布于:11月以前  |  1683次阅读  |  详细内容 »

Chrome 运行时性能瓶颈分析

发布于:11月以前  |  956次阅读  |  详细内容 »

移动 Web 最佳实践(干货长文,建议收藏)

笔者在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,比如报销、出差、crm 等等,react native 主要负责即时通信部分,是在 mattermost-mobile的基础上修改的(mattermost 是一个开源的即时通讯方案)。

发布于:11月以前  |  1012次阅读  |  详细内容 »

你知道小程序最后上线的代码是什么样子吗?

我们知道小程序最开始出来的时候,包括到现在;官方给出的写法是js对应逻辑层,wxml也自己尝试了一套DSL自定义视图的模板语法,写法雷同vue的template语法:

发布于:11月以前  |  1091次阅读  |  详细内容 »

一文了解文件上传全过程(1.8w字深度解析,进阶必备)

本文比较长可能需要花点时间去看,需要有耐心,我采用自顶向下的方式,所有示例会先展现出你熟悉的方式,再一层层往下, 先从请求端是怎么发送文件的,再到接收端是怎么解析文件的。

发布于:11月以前  |  1062次阅读  |  详细内容 »

不可错过的实用前端工具

给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区网站和博客,以及一些资源网站,希望可以帮助到大家!

发布于:11月以前  |  959次阅读  |  详细内容 »

理解 WebView

我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文!虽然浏览器对于访问互联网内容的任务来说非常流行,它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。

发布于:11月以前  |  989次阅读  |  详细内容 »

前端必备的 Terminal 终端进阶技巧

本文我会首先带你零基础认识终端,了解其常见用写法,告诉你新手入门哪些地方可以碰,那些地方是雷区。

发布于:11月以前  |  965次阅读  |  详细内容 »

Facebook 前端技术栈重构分享

当我们考虑如何构建一个新的网络应用—一个为现代浏览器设计的、具有用户对Facebook(我们已知的)所有期望的功能,我们现有的技术栈无法支持我们所需要的类似于桌面应用的感觉和性能。

发布于:11月以前  |  913次阅读  |  详细内容 »

用 esbuild 让你的构建压缩性能翻倍

发布于:11月以前  |  1727次阅读  |  详细内容 »

Deno 1.0正式发布!它能替代 NodeJS 吗?

发布于:11月以前  |  909次阅读  |  详细内容 »

Node进阶——之事无巨细手写Koa源码

发布于:11月以前  |  955次阅读  |  详细内容 »

最多阅读

为Electron程序添加运行时日志 1年以前  |  9533次阅读
Node.js下通过配置host访问URL 2年以前  |  3624次阅读
js动态创建类和实例化 2年以前  |  2843次阅读
初探 React 组件 2年以前  |  2721次阅读
wordpress标签页的制作 2年以前  |  2715次阅读
500行PHP代码搞定富文本安全过滤 2年以前  |  2610次阅读
22个HTML5的初级技巧 2年以前  |  2535次阅读
浅谈浏览器的原生拖拽事件 2年以前  |  2490次阅读
使用 SRI 增强 localStorage 代码安全 2年以前  |  2477次阅读
CSS清除浮动 2年以前  |  2445次阅读
第三版主题上线 2年以前  |  2440次阅读
利用服务器返回header来传输数据 2年以前  |  2416次阅读
【译】V8 团队眼中的 ES6、ES7及未来 2年以前  |  2383次阅读
获取元素的计算的样式 2年以前  |  2375次阅读
2014年度总结 2年以前  |  2344次阅读