HTML5學習筆記 拖放

浪花一朵朵發表於2015-06-04
HTML筆記

拖放(Drag和drop)是html5標準的組成部分

拖放是一種常見的特性，即抓取物件以後拖到另一個位置

在html5中，拖放是標準一部分，任何元素都能夠拖放。

設定元素為可拖放

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

<img draggable="true">

拖動什麼 -ondrapstart和setData()

然後，規定當元素被拖動時，會發生什麼。

在上面的例子中，ondragstart屬性呼叫了一個函式，drag(event),它規定了被拖動的資料。

dataTransfer.setData()方法設定被拖資料的資料型別和值

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
 }

在這個例子中，資料型別是"Text",值是可拖動元素的id("drag1").

放到何處-ondragover

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

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

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

event.preventDefault()

進行放置-ondrop

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

在上面的例子中，ondrop屬性呼叫了一個函式，drop(event):

function drop(ev)
 {
 ev.preventDefault();
 var data=ev.dataTransfer.getData("Text");
 ev.target.appendChild(document.getElementById(data));
 }

程式碼解釋：

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

通過dataTransfer.getData("Text")方法獲得被拖的資料。該方法將返回在setData()方法中設定為相同型別的任何資料。

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

把被拖元素追加到放置元素(目標元素)中

 

相關文章