虽然之前有写过模拟浏览器拖拽行为的组件，但这种拖拽限制于改变 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 ){ |
06 |
document.addEventListener( 'drop', function( e ){ |
07 |
var dt = e.dataTransfer, |
17 |
reader = new FileReader(); |
20 |
reader.onload = function( e ){ |
25 |
reader.readAsDataURL( item ); |
上面是从系统向浏览器拖入文件的处理方法，那么对于页面中本身存在的元素，该如何处理呢？
HTML5 的 dataTransfer 对象在各高档浏览器中的表现还是有所差异的，比如对于直接拖拽页面中的图片然后读取图片信息，有些浏览器并不支持，或者是太麻烦，我就没去做尝试了，如果有深究过的可以告诉我。
在页面中的图片，本身都有一个 URL，在开始拖拽的时候将拖拽的数据设置成图片的 URL，然后在放置的时候读取这个 URL，最后将这个 URL 提交给服务端，让服务端去下载该图即可。
在拖拽开始时使用 setData 方法设置拖拽数据为图片的 URL：
1 |
<img src="https://example.com/test.jpg" alt="" id="testImg" /> |
01 |
var testImg = document.getElementById( 'testImg' ); |
03 |
testImg.addEventListener( 'dragstart', function( e ){ |
04 |
var dt = e.dataTransfer; |
08 |
dt.setData( 'text', this.src ); |
在放置的时候使用 getData 方法来获取数据：
01 |
document.addEventListener( 'drop', function( e ){ |
02 |
var dt = e.dataTransfer, |
06 |
src = dt.getData( 'text' ); |
如果 img 标签包含在 a 标签中，想让这些图片元素也支持拖拽传递图片 URL，需要给 a 元素绑定 dragstart 事件，然后使用 setData 方法将图片的 URL 存储进去。因为 a 元素默认拖拽的时候传递的是其自身的链接。
高档浏览器在使用 setData、getData 方法在设置和读取拖拽的数据类型时都支持好几种数据格式，常见的如 text/plain，而唯独 IE10 只支持 text 格式，为了兼容性，没有特殊情况的话还是得老老实实设置成 text 格式。
有了 setData、getData 方法，就可以在拖拽和放置时很方便的传递数据，高档浏览器支持的类型更多，有更多的可能。
如需转载请以链接形式注明原载或原文地址。
（举报）
