专栏首页偏前端工程师的驿站JS魔法堂:IE5~9的Drag&Drop API

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 条评论
登录 后参与评论

相关文章

  • 项目小结:日立OA系统(Asp.net)

    前言                                         进入公司6个月后被安排到该项目中,据说该项目规模很大,而拆分到公司的就只是...

    ^_^肥仔John
  • CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一、前言                                  IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后...

    ^_^肥仔John
  • 打造高效前端工作环境-tmuxinator

    前言  虽然tmux能让我们方便组织工作环境,但每次重新打开会话时都需要手动重新创建窗口、窗格和执行各种程序,能不能像VS那样以工程为单位保存窗口、窗格和各种所...

    ^_^肥仔John
  • 科技巨头新策略:用开源吸引 AI 社区成员,然后控制一切

    研究在 AI 发展中起着至关重要的作用。这些科技巨头必须尽其所能助力 AI 的发展。 根据最近麦肯锡全球研究所的数据,去年谷歌和百度等科技巨头在 AI 上花费了...

    企鹅号小编
  • 使用nodejs运行SAP Fiori应用

    (1) download and install NodeJS in your local laptop:https://nodejs.org/en/downl...

    Jerry Wang
  • NLP简报(Issue#1)

    欢迎来到船新栏目「NLP 简报」,本新闻简报的目的是让你不必花费太多时间就可以了解与 NLP 和 ML 有关的一些有趣和最新的故事。

    kaiyuan
  • GeetTest~下一代验证(附C#案例)

    基本介绍 极验验证除了在服务器端提供了广泛的语言支持外,在客户端也提供了多平台的扩展支持。 客户端主要涵盖了如下平台: pcWeb 普通台式电脑,笔记本电脑w...

    逸鹏
  • 科研工作者如何合理使用谷歌浏览器

    由于中国大陆无法直接打开Chrome应用商店.所以,可以利用chrome开发者模式,来安装源码码实现使用本插件. 安装登录成功后,再去线上安装正式版本. 1...

    孤独的明月
  • Hijack攻击揭秘

    概述 Clickjacking是最近新兴的针对WEB前端的攻击手段。它通常使用一个ifream覆盖掉当前页面,欺骗用户点击iframe中的恶意...

    FB客服
  • 谷歌值得我们信任吗?

    生活中貌似我们都逃脱不了谷歌的手掌心。 多年以前,两个踌躇满志的大学生将自己的研究项目变成了一个网站,而现在这个网站已经市值千亿,为我们提供方方面面的便捷服务,...

    程序员互动联盟

扫码关注云+社区

领取腾讯云代金券