欢迎您光临爱永设计官网!
电话图标 服务热线/微信:13436537174 QQ咨询:276583799

最新动态

news

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

发表日期:2013-12-28 文章作者:爱永设计  浏览次数:2481 次

虽然之前有写过模拟浏览器拖拽行为的组件,但这种拖拽仅限于改变 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 中,在放置的时候就可以通过该对象来读取文件,代码如下:

01 document.addEventListener( 'dragover', function( e ){
02     // 阻止默认事件的触发
03     e.preventDefault();
04 }, false );
05
06 document.addEventListener( 'drop', function( e ){
07     var dt = e.dataTransfer,
08         item, reader;
09     
10     // 阻止默认事件的触发
11     e.preventDefault();
12     
13     if( dt && dt.files ){
14         item = dt.files[0];
15         
16         // 通过使用FileReader构造器来读取该文件
17         reader = new FileReader();
18     
19         // 读取文件后将base64的数据传递给隐藏的输入框并做提交
20         reader.onload = function( e ){
21             // e.target.result 中就包含了读取到的文件信息          
22         };
23
24         // 读取文件
25         reader.readAsDataURL( item );
26     }
27 }, false );

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

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

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

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

1 <img src="http://example.com/test.jpg" alt="" id="testImg" />
01 var testImg = document.getElementById( 'testImg' );
02
03 testImg.addEventListener( 'dragstart', function( e ){
04     var dt = e.dataTransfer;
05     
06     if( dt ){
07         // 将图片的URL设置成拖拽数据的文本类型
08         dt.setData( 'text', this.src );
09     }
10 }, false );

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

01 document.addEventListener( 'drop', function( e ){
02     var dt = e.dataTransfer,
03         src;
04     
05     if( dt ){
06         src = dt.getData( 'text' );
07         
08         // 将 URL 提交给服务端
09     }
10 }, false );

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

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

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

标签:,
将文章分享到..
相关新闻
最新新闻
随机新闻
最新网站案例
  • 我们能做什么

    致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

  • 网站模板优势

  • 更多 +关于爱永设计

    爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!

Copyright © 2013 - 2019 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:http://www.aymoban.com/ 京ICP备17063353号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作