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?

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

[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. [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;
       iaLi.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;
       iaA.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对象的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！