HTML5讲解之dataTransfer对象


本文摘自PHP中文网,作者ringa_lee,侵删。

[导读] HTML5拖拽的数据传输  虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽,在IE6和IE7中还是有些拖拽问题,并且也没有实现数据的交换。为了实现数据的交换,IE5引入了dataTransfer对象。

HTML5拖拽的数据传输

  虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽,在IE6和IE7中还是有些拖拽问题,并且也没有实现数据的交换。为了实现数据的交换,IE5引入了dataTransfer对象。dataTransfer对象是事件对象的一个属性,用于从被拖拽元素相放置目标传递字符串格式的数据。因为它是事件对象的属性,所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中,可以使用这个对象的属性和方法来完善拖放功能。

  dataTransfer对象有两个主要的方法:getData()方法和setData()方法。从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数,也是getData()方法唯一的一个参数,是用来保存数据类型的字符串,取值是”text”或”URL”。

  IE只定义了”text”或”URL”两种有效的数据类型,而HTML5则对此加以扩展,允许指定各种MIME类型。考虑到向后兼容,HTML5也支持”text”或”URL”,但这两种类型会被映射为”text/plain”或”text/url-list”。

  实际上,dataTransfer对象可以为每种MIME类型都保存一个值。也就是说同事在这个对象中保存一段文本和一个URL不会有其他问题。不过,保存在dataTransfer对象中的数据只能在drop事件处理程序中读取。如果在ondrop处理程序中没有读取数据,那就是dataTransfer对象已经被销毁,数据也就随之丢失了。

  在拖动文本框中的文本时,浏览器会调用setData()方法,将拖动的文本以”text”格式保存在dataTransfer对象中。类似地,在拖放链接或图像时,会调用setData()方法并保存URL。然后,在这些元素被拖放到放置目标时,就可以通过getData()方法读到这些数据。当然,作为开发人员,你也可以通过dragstart事件处理程序中调用setData(),手工保存自己要传输的数据,以便将来使用。

  将数据保存在文本和保存为URL是有区别的。如果将数据保存为文本格式,那么数据不会得到任何特殊处理。如果保存为URL格式,浏览器会将其当成网页中的链接。如果你将这个URL放置到另一个浏览器窗口中,就可以打开该URL。

  Firefox 5及之前版本是不能将”url”和”text”映射为””和”text/plain”。但是却能把”Text”(T大写)映射为”text/plain”。为了更好地在跨浏览器的情况下从dataTransfer对象取得数据,最好在取得URL数据时检测两个值,而在取得文本数据时使用”Text”。

  注意,一定要把短数据类型放在前面,因为IE10及之前的版本仍然不支持扩展的MIME类型名,而它们在遇到无法识别的数据类型时,会报错。不过”text”或”URL”取值只有IE是强制的,在火狐3.6+、Chrome和Opera中设置其他任意值的字符串也能正常执行。

  dropEffect属性和effectAllowed属性

  运用dataTransfer对象,不仅仅能传输数据,还能通过dataTransfer对象确定被拖拽的元素以及作为放置目标的元素能够接收什么操作。要实现这样的功能就用到了dropEffect属性和effectAllowed属性。

  dropEffect属性

  其中,通过dropEffect属性可以知道被拖动的元素能够执行哪种行为。这个属性的四个值如下:

  none:不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。

  move:应该把拖动的元素移动到放置目标。

  copy:应该把拖动的元素复制到放置目标。

  link:放置目标会打开拖动的元素(但拖动的元素必须是个链接,有URL地址)。

  把元素拖动到放置目标上的时候,以上每一个值都会导致光标显示为不同的符号。

  effectAllowed属性

  光有dropEffect属性是不咋管用的。只有结合effectAllowed属性一起使用才能发挥功效。effectAllowed属性表示允许拖动元素的哪种行为(dropEffect)。effectAllowed属性也有很多值,其值如下:

  uninitialized:没有给被拖动元素设置任何放置行为。

  none:被拖动的元素不能有任何行为。

  copy:只允许值为”copy”的dropEffect。

  link:只允许值为”link”的dropEffect。

  move:只允许值为”move”的dropEffect。

  copyLink:允许值为”copy”和”link”的dropEffect。

  copyMove:允许值为”copy”和”move”的dropEffect。

  linkMove:允许值为”link”和”move”的dropEffect。

  all:允许任意dropEffect。

  要设置effectAllowed属性必须在ondragstart事件处理程序中设置。小例子如下

  HTML代码

[html] view plaincopyprint?

1

2

3

4

5

6

7

<ul

    <li draggable="true">梦龙小站</li

    <li draggable="true">梦龙小站</li

    <li draggable="true">梦龙小站</li

</ul

<a href="http://www.baidu.com/">梦龙小站</a

<p id="p1">梦龙小站</p>

  CSS代码

1

2

3

4

[css] view plaincopyprint?

 

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;} 

#p1{ width:100px; height:100px; background:red; margin:300px;}

  JavaScript代码

  1. 1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    [javascript] view plaincopyprint?

     

    //dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的 

    //拖动不带链接的li,会起作用但不跳转链接 

    //拖动带连接的a,会起作用也跳转 

       

    window.onload = function(){ 

        var aLi = document.getElementsByTagName('li'); 

        var aA = document.getElementsByTagName('a'); 

        var op = document.getElementById('p1'); 

           

        for(var i=0;i<aLi.length;i++){ 

           

            aLi[i].ondragstart = function(ev){ //拖拽前触发 

               

                this.style.background = 'yellow'

                   

                ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串 

                   

                ev.dataTransfer.effectAllowed = 'all'

                   

                ev.dataTransfer.setDragImage(this,0,0); 

               

            }; 

               

            aLi[i].ondragend = function(){  //拖拽结束触发 

               

                this.style.background = ''

               

            }; 

        

        for(var i=0;i<aA.length;i++){ 

           

            aA[i].ondragstart = function(ev){ //拖拽前触发 

               

                this.style.background = 'yellow'

                   

                ev.dataTransfer.setData('a','hello');  //存储一个键值对 : value值必须是字符串 

                   

                ev.dataTransfer.effectAllowed = 'link'

                   

                ev.dataTransfer.setDragImage(this,0,0); 

               

            }; 

               

            aA[i].ondragend = function(){  //拖拽结束触发 

               

                this.style.background = ''

               

            }; 

        

           

        op.ondragenter = function(){  //相当于onmouseover 

               

            this.style.background = 'green'

               

        }; 

           

        op.ondragleave = function(){  //相当于onmouseout 

               

            this.style.background = 'red'

               

        }; 

           

        op.ondragover = function(ev){ //进入目标、离开目标之间,连续触发 

               

            ev.preventDefault();  //阻止默认事件:元素就可以释放了 

               

            ev.dataTransfer.dropEffect = 'link'//真对外部文件 

               

        }; 

           

        op.ondrop = function(ev){  //释放鼠标的时候触发 

           

            this.style.background = 'red';   

           

            alert( ev.dataTransfer.getData('a') ); 

           

        }; 

           

    };

以上就是HTML5讲解之dataTransfer对象的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

值得一个的5个强大的html5api 函数

通过html5实现图片上传与预览功能

html5 viewport总结讲述

h5 canvas中fill 与stroke文字效果实现实例

flash和html5的区别有哪些

html5实践-使用css3如何完成google涂鸦动画的详解

html5 canvas画布详解(二)

html5 video标签的属性、方法和事件汇总介绍

解析html5应用与原生应用之间的差别

解决在html5中的video标签无法播放视频的方法

更多相关阅读请进入《dataTransfer》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...