HTML5中dataTransfer對象的示例分析

這篇文章將為大家詳細講解有關HTML5中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?

<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;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對象的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。