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功能不全,导致比较少人愿意了解它,相关资料也相对难找。上述内容均为个人测试结果,若有纰漏,欢迎大家指正,谢谢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏React Native开发圈

React Native二维码生成组件

value:二维码的值 size:大小,默认128 bgColor:背景色,默认#000 fgColor:前景是,默认#fff

13320
来自专栏张善友的专栏

ASP.NET 主题(Themes)FAQ

1、主题是什么 主题由一组元素组成:外观、级联样式表 (CSS)、图像和其他资源。主题将至少包含外观。主题是在网站或 Web 服务器上的特殊目录中定义的。主题...

20850
来自专栏疯狂的小程序

分享:微信小程序中的分享事件

在页面的js文件中定义了 onShareAppMessage 函数时,页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。

57790
来自专栏成猿之路

程序员word编写小记

大家看代码时,都希望有文档。但是我们平时又懒得写文档。为什么呢?今天写了一下,才发现,这和word的使用熟练程度有很大关系。

14630
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(二)

2.2 选中MasterViewController.xib 选中view,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。

15420
来自专栏代码GG之家

Scoops android app多主题架构(二)

简要说明 通过注释方式,完成多主题的效果更换。可以减少一些代码,使得代码更清晰一些。 ? 使用说明 1 首先写一个注释类 ? 2 在MainApp 初始化的时候...

21380
来自专栏游戏杂谈

构建第一个Flex的Mobile APP

Flash Builder 4.5已经支持直接创建Flex Mobile Project,写一个最简单的例子

13320
来自专栏前端儿

HTML5 的拖放(实例:两个div之间拖放图片)

首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true :

18410
来自专栏Crossin的编程教室

在 Win 控制台中实现菜单

本教室的 hymyg 同学实现了两个控制台下的实用模块,发在了论坛上。我觉得挺不错的,于是分享其中的一个给大家。对项目感兴趣,想进一步了解细节的,可以在公众号里...

29450
来自专栏进击的君君的前端之路

JS相关概念

17320

扫码关注云+社区

领取腾讯云代金券