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

发表于 5年以前 | 总阅读数：4053 次

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