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碼

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

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

以上就是HTML5實戰與剖析之原生拖曳(三dataTransfer物件)的內容，更多相關內容請關注PHP中文網（www.php.cn）！