小強的HTML5行動開發之路（16）－神奇的拖放功能

在智慧型手機發展飛速的現在拖放功能已經成為一種時尚，但是在我們的瀏覽器上是不是還缺少這種方便快捷的功能?在HTML5的新標準中就有關於拖放的標準，作為Html5標準的一部分，任何元素都可以被拖放。

一、瀏覽器支援情況

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支援拖放。

註：在 Safari 5.1.2 不支援拖放。

二、使用方法

首先，為了使元素可拖動，把draggable 屬性設定為true ：

<img draggable="true" />

然後，規定元素被拖曳時，會發生什麼 

start

讓rag ，並給該函數傳回一個拖曳物件

<img id="drag1" src="img_logo.gif" draggable="true"  
ondragstart="drag(event)" width="336" height="69" />

dataTransfer.setData() 方法設定被拖曳資料的資料類型和值：(我們將被拖曳物件的id傳給dataTransfer)

function drag(ev)  
{  
<span style="white-space:pre">  </span>ev.dataTransfer.setData("Text",ev.target.id);  
}

放到何處- ondragover

ondragover 事件規定在何處放置被拖曳的資料。

默認地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。

這要透過呼叫 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

當放置被拖曳資料時，會發生 drop 事件。

在上面，ondrop 屬性調用了一個函數，drop(event)：

function drop(ev)  
{  
<span style="white-space:pre">  </span>ev.preventDefault();  
<span style="white-space:pre">  </span>var data=ev.dataTransfer.getData("Text");  
<span style="white-space:pre">  </span>ev.target.appendChild(document.getElementById(data));  
}

程式碼解釋：

• 調用preventDefault() 來避免瀏覽器對資料的預設處理（drop 事件的預設行為是以連結形式開啟）

• 透過dataTransfer.getData("Text") 方法取得被拖曳的資料。此方法將傳回在 setData() 方法中設定為相同類型的任何資料。

• 被拖資料是被拖元素的id ("drag1")

• 把被拖元素追加到放置元素（目標元素）中

二、實例說明以上就是 小強的HTML5行動開發之路（16）－神奇的拖放功能的內容，更多相關內容請關注PHP中文網（www.php.cn）！