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功能不全,导致比较少人愿意了解它,相关资料也相对难找。上述内容均为个人测试结果,若有纰漏,欢迎大家指正,谢谢!
- P03_Hive 安装
- P06_flume-ng-1.5.0-cdh5.3.6安装
- P04_zookeeper-cdh5集群搭建
- P05_kafka_2.9.2-0.8.1集群搭建
- 再探matplotlib
- 分布式系统(Distributed System)资料
- Python性能提升20倍居然不是标题党?
- Spark开发电商日志分析用户行为聚合功能练习下面开始搭建开发环境注意Task表中最后一个列task_param中,Json的StartDate和EndDate需要设置成今天,因为mock数据的时候,
- HDU 3783 ZOJ
- HDU 1412 {A} + {B}
- HDU 2092 整数解
- Hadoop数据分析平台实战——020Hadoop Shell命令(初学跳过)离线数据分析平台实战——020Hadoop Shell命令(可跳过)
- HDU 2080 夹角有多大II
- 二分查找模版
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 访问虚拟机局域网服务拒绝连接
- uninstalling vim-minimal 同时也卸载了 sudo 解决方法
- 大点干!早点散----------深入剖析缓存加速--squid(反向代理与ACL访问控制以及sarg日志)
- JVM的Xms和Xmx参数设置为相同值有什么好处?
- 【CVPR 2020】一种新的门控通道注意力转换单元
- 5个好用的 CSS 函数
- java1.8中Object类源码分析
- 多线程基础(六):Object的wait方法以及notify与notifyAll的区别
- Day15:反转链表
- Day16:合并两个排序的链表
- 大厂面试爱问的「调度算法」,20 张图一举拿下
- Day17:树的子结构
- 多线程基础(七):关于HotSpot中notify方法不具备随机性的证明
- Day18:二叉树的镜像
- ksubdomain 无状态域名爆破工具