JS魔法堂：IE5~9的Drag&Drop API

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

《 HTML5魔法堂：全面理解Drag & Drop API》中提到从IE5开始已经支持DnD API，但IE5~9与HTML5的API有所不同，下面我们来了解一下吧！

二、IE5~9与HTML5的DnD API的不同点　　　　　　　　　　　　　　　　

1. IE5~9DnD API仅对 img元素、 a[href]元素和 input[type=text]/textarea元素中被选中的文字有效，且不用设置 draggable="true" ; 而HTML5中凡是设置了 draggable="true" 特性的，均会启用DnD API。

2. IE5~9下的[object DataTransfer]存储的大类型中，不支持文件类型，仅支持字符串类型。因此无法实现从外部拖拽文件到文档内，实现文件上传的功能。

三、生命周期　　　　　　　　　　　　　　　　　　　　　　　　　　　

dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend

四、[object DataTransfer]类型　　　　　　　　　　　　　　　　　　　　

void setData({DOMString} format, {DOMString} data) ：将指定格式的数据赋值给dataTransfer，format值范围为URL、Text。

DOMString getData({DOMString} format) ：从DataTransfer对象中获取指定格式的数据。

void clearData([{DOMString} format]) ：从DataTransfer对象中删除指定格式或全部数据，仅在dragstart中调用。

effectAllowed 和 dropEffect 的取值范围和作用请浏览《 HTML5魔法堂：全面理解Drag & Drop API#t8》

实测效果（由于我是在IE11下通过切换文档模式来测试的，测试结果可能与实际的IE5~9有所差别，欢迎各位指正！）

浏览器	effectAllowed默认值	effectAllowed值	dropEffect默认值	默认使用的鼠标指针效果
IE5~9	uninitialized	uninitialized	copy	copy
		copy	copy	copy
		move	move	move
		link	link	link
		copyMove	none	copy
		copyLink	none	link
		linkMove	none	link
备注：	1. 不能通过 shift键切换copyLink，copyMove和linkMove的样式； 2. 若effectAllowed设置为copyLink、copyMove或linkMove，且dropEffect与之对应，则鼠标样式将为dropEffect所设置的样式

五、深入探讨各种DnD方式　　　　　　　　　　　　　　　　　　　　

拖拽方式分为：页面内部的拖拽释放、同域页面间的拖拽释放、异域页面间的拖拽释放、从操作系统拖拽资源到页面、从页面拖拽元素到操作系统或其他程序中释放。

IE5~9的情况

拖拽方式	默认效果
页面内部的拖拽释放	1。拖拽 img元素和 a[href]元素时，对应的元素跟随鼠标移动，但释放无果; 2. 拖拽 input[type=text]/textarea元素中被选中的文字时，若在其他 input[type=text]/textarea元素上释放，则会执行剪切粘贴操作。
同域页面间的拖拽释放	1.拖拽 img元素和 a[href]元素时，将使释放所在的页面重定向到图片或超链接资源; 2.拖拽 input[type=text]/textarea元素中被选中的文字时，若在其他 input[type=text]/textarea元素上释放，则会执行剪切粘贴操作; 3. 多个页面共享dataTransfer对象; 4. 拖拽 img元素时会自动将图片地址通过setData保存到Text和URL格式中。 5. 拖拽 a[href]元素时会自动将资源地址通过setData保存到Text和URL格式中 6. 拖拽 input[type=text]/textarea 中选中的文字时会自动将文本通过setData保存到Text格式中(URL格式返回null)
异域页面间的拖拽释放	1. dataTransfer对象不被共享; 2. 拖拽img元素和a[href]元素时，将使释放所在的页面重定向到图片或超链接资源; 3. 拖拽input[type=text]/textarea元素中被选中的文字时，若在其他input[type=text]/textarea元素上释放，则会执行剪切粘贴操作;
从操作系统拖拽资源到页面	效果与异域页面间的拖拽释放一致
从页面拖拽元素到操作系统或其他程序中释放	1. 拖拽img元素和a[href]元素时，释放将会将元素保存为图片和网页文件（根据浏览器安全设置，会弹出二次确定窗口） 2. 拖拽input[type=text]/textarea元素中被选中的文字时，在非OS自带的文本编辑器中释放时，会执行复制粘贴操作。

Chrome的情况

效果与IE5~9的相同，就是多了下面的几点而已。

　　　1. 从操作系统拖拽资源到页面，若拖拽的时文件资源，且在 input[type=file]元素上释放，则文件路径等信息会自动附加到 input[type=file]元素上;

2. 从页面拖拽元素到操作系统活其他程序中释放，除上述三种的其他 [draggable=true]元素，默认是可拖拽但无法释放的。可通过 dataTransfer.setData 设置有效的URL格式数据，则可桌面等地方释放元素，且效果与释放超链接一致; 也可通过 dataTransfer.setData 设置Text格式数据，则可在非OS自带的文本编辑器中释放元素，效果与 input[type=text]/textarea元素中被选中的文字一致。

六、不对称拖拽效果示例　　　　　　　　　　　　　　　　　　　　　　　　　

针对异域页面拖拽释放，我们举个栗子！

页面A：a.test.com，页面B：b.test.com

由于两个属于异域页面，因此默认情况下是无法共享dataTransfer的。现在通过 document.domain='test.com'; 修改页面A所属域，此时从页面A开始拖拽，到页面B释放，dataTransfer对象将被共享。而从页面B开始拖拽，到页面A释放，dataTransfer将无法共享。

七、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

由于IE5~9原生DnD API功能不全，导致比较少人愿意了解它，相关资料也相对难找。上述内容均为个人测试结果，若有纰漏，欢迎大家指正，谢谢！

尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/3980563.html ^_^肥仔John

巴特西

JS魔法堂：IE5~9的Drag&Drop API

最新文章

热门文章