雨夜带刀's Blog

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

虽然之前有写过模拟浏览器拖拽行为的组件,但这种拖拽仅限于改变 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 方法,就可以在拖拽和放置时很方便的传递数据,高级浏览器支持的类型更多,有更多的可能。

原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/drag-drop.html
如需转载请以链接形式注明原载或原文地址。
上一篇:
下一篇:

发表评论:

  • *
  • *
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。