首頁 >web前端 >H5教程 >HTML5講解之dataTransfer對象

HTML5講解之dataTransfer對象

ringa_lee
ringa_lee原創
2017-10-15 10:57:143257瀏覽

[導讀] 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?

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

 

#[html] view plaincopyprint?

[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;}

 

##  CSS程式碼

[javascript] view plaincopyprint?

//dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的  
//拖动不带链接的li,会起作用但不跳转链接  
//拖动带连接的a,会起作用也跳转  
  
window.onload = function(){  
    var aLi = document.getElementsByTagName(&#39;li&#39;);  
    var aA = document.getElementsByTagName(&#39;a&#39;);  
    var op = document.getElementById(&#39;p1&#39;);  
      
    for(var i=0;i<aLi.length;i++){  
      
        aLi[i].ondragstart = function(ev){ //拖拽前触发  
          
            this.style.background = &#39;yellow&#39;;  
              
            ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串  
              
            ev.dataTransfer.effectAllowed = &#39;all&#39;;  
              
            ev.dataTransfer.setDragImage(this,0,0);  
          
        };  
          
        aLi[i].ondragend = function(){  //拖拽结束触发  
          
            this.style.background = &#39;&#39;;  
          
        };  
    }  
    for(var i=0;i<aA.length;i++){  
      
        aA[i].ondragstart = function(ev){ //拖拽前触发  
          
            this.style.background = &#39;yellow&#39;;  
              
            ev.dataTransfer.setData(&#39;a&#39;,&#39;hello&#39;);  //存储一个键值对 : value值必须是字符串  
              
            ev.dataTransfer.effectAllowed = &#39;link&#39;;  
              
            ev.dataTransfer.setDragImage(this,0,0);  
          
        };  
          
        aA[i].ondragend = function(){  //拖拽结束触发  
          
            this.style.background = &#39;&#39;;  
          
        };  
    }  
      
    op.ondragenter = function(){  //相当于onmouseover  
          
        this.style.background = &#39;green&#39;;  
          
    };  
      
    op.ondragleave = function(){  //相当于onmouseout  
          
        this.style.background = &#39;red&#39;;  
          
    };  
      
    op.ondragover = function(ev){ //进入目标、离开目标之间,连续触发  
          
        ev.preventDefault();  //阻止默认事件:元素就可以释放了  
          
        ev.dataTransfer.dropEffect = &#39;link&#39;;  //真对外部文件  
          
    };  
      
    op.ondrop = function(ev){  //释放鼠标的时候触发  
      
        this.style.background = &#39;red&#39;;    
      
        alert( ev.dataTransfer.getData(&#39;a&#39;) );  
      
    };  
      
};

 

  JavaScript程式碼
  1.  
###rrreee#######

以上是HTML5講解之dataTransfer對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn