HTML5解说之dataTransfer对象-

发布时间：08/01 来源：未知浏览：关键词：

HTML5拖拽的数据传输虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽，在IE6和IE7中还是有些拖拽题目，而且也没有实现数据的交流。为了实现数据的交流，IE5引入了dataTransfer对象。 [导读] 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?

梦龙小站
梦龙小站
梦龙小站

梦龙小站

　　CSS代码

[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代码

[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

以上就是HTML5解说之dataTransfer对象的细致内容，更多请关注百分百源码网其它相干文章！

打赏