正文

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

IP云
IP云V管理员/3 阅读
10/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、前言   

《 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~9uninitializeduninitializedcopycopy
copycopycopy
movemovemove
linklinklink
copyMovenonecopy
copyLinknonelink
linkMovenonelink
备注：

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的更多相关文章

  1. HTML5魔法堂：全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

  2. JS魔法堂：判断节点位置关系

    一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...

  3. JS魔法堂：LINK元素深入详解

    一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...

  4. JS魔法堂：IMG元素加载行为详解

    一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...

  5. JS魔法堂：jsDeferred源码剖析

    一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...

  6. JS魔法堂：属性、特性，傻傻分不清楚

    一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...

  7. JS魔法堂：浏览器模式和文档模式怎么玩？

    一.前言 从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现 ...

  8. JS魔法堂：精确判断IE的文档模式by特征嗅探

    一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器 ...

  9. JS魔法堂&colon;不完全国际化&amp&semi;本地化手册 之 理論篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...

随机推荐

  1. vector使用篇之erase

    由于最近项目使用中发现了之前对vector的一个误区,由此发现自己对vect非常不了解,对此进行了一些了解,由此打算写一下关于vector使用方面的注意点,本篇先来讲一下vector的erase功能, ...

  2. 【转载】Mysql binlog relaylog 日志迁移

    背景:   默认情况下,mysql的数据.binlog.relaylog都是保存在同一个磁盘上,路径根据每个人的设置不一. 当mysql数据库中数据或日志增长很快时,磁盘可能面临空间不够或者IO性能跟 ...

  3. 小猪Android越来越方式 Day 5 - part 2

    小猪的Android入门之路 Day 5 - part 2 Activity片段:Fragment(碎片)                                  ------转载请注明出处 ...

  4. &lbrack;转&rsqb;TSVNCache&period;exe卡死电脑的解决方法

    转至于https://blog.csdn.net/gnail_oug/article/details/55506820. 正文如下: 每当打开explorer资源管理器的时候,经常卡死,换了固态硬盘还 ...

  5. php 页面调转导致session丢失解决方法

    例如在a页面设置了会话,然后打印会话值,可以成功打印,但是调转到b页面后,会话丢失了. 原因有不少,一个原因就是没有在页面开头加入session_start();当然你也可以直接配置php.ini文件 ...

  6. Oracle密码过期the password has expired解决办法

    oracle 出现the password has expired这个问题,今天突然发现项目访问不了,一查发现用不了,也登不进去, 这个问题由是Oracle11g密码过期的原因导致的 调试Web项目的 ...

  7. 20165218 2017-2018-2 《Java程序设计》课程总结

    20165218 2017-2018-2 <Java程序设计>课程总结 一.每周作业链接汇总 20165218 我期望的师生关系 20165218 学习基础和C语言基础调查 2016521 ...

  8. Mysql 索引原理《一》索引原理与慢查询1

    为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句的优化显然 ...

  9. my&period;conf 修改编码

    mysql汉字乱码的原因 mysql默认的编码是Latin1是I-8859-1的别名,但Latin1是不支持汉字的,所以要将其改为UTF-8或GBK 1.关闭mysql服务器,这个很重要. 2.通过m ...

  10. Django中字典在html中的遍历

    Django中字典在html中的遍历 如:在view中定义的函数 info = {'} context = {"info": info} 要在html中变量出info的信息(注意i ...