康廷數位: HTML5 支援拖曳/置放（Drag and Drop）行為

》HTML5 全域屬性

HTML5 對介面互動操作的程式化控制支援，最重要的莫過於拖曳/置放（Drag and Drop）行為了，要在網頁上支援拖曳操作，基本上必須處理 dragstart 、 dragover 與 drop 這三個事件。

事件	說明
dragstart	開始拖曳操作時被觸發。
dragover	拖曳經過目標元素時被觸發。
drop	拖曳並且置放至目標元素時被觸發。

除此之外，準備支援拖曳作業的 DOM 物件，其 draggable 屬性必須為 true 。

第一個事件 dragstart 於被拖曳的物件上被觸發，它的事件回應函式像這個樣子：

function dragstartHandler(event){

//　取得拖曳的資料　…

}

第二與第三個事件於物件被拖曳進入目標區域，完成置放時被觸發，同樣的，它的事件回應函式像這個樣子：

function dragoverHandler(event) {

}

function dropHandler(event) {

// 將 dragstart 事件回應函式中的物件取出，最後配置於目標區域

}

考慮以下的圖示，我們打算讓這個網頁支援拖曳功能，讓使用者可以將在左邊黑色區域中的圖片，拖曳至右邊空白區塊中置放。

完成拖曳後的畫面像這個樣子：

在拖曳的過程中，圖片是被拖曳的物件，因此註冊其 dragstart 事件並且配置於一個預先指定的 <div> 標籤中，也就是截圖中的黑色區塊，右邊的拖曳目標空白區塊是一個 <div> 標籤，為其註冊 dragover 與 drop 事件，畫面內容的配置如下：

<body>

<img id="kt" src="images/girl.jpg" draggable="true"

ondragstart="dragstartHandler(event)" />

</div>

<p></p>

<div style="…"

ondragover="dragoverHandler(event)"

ondrop="dropHandler(event)" >

</div>

</body>

現在撰寫對應的事件回應函式，首先是 dragstartHadler(event) ，內容如下，透過 event 參數引用 dataTransfer　調用 setData() 將存使用者拖曳資料的相關資訊儲存至暫存區。

function dragstartHandler(event) {

event.dataTransfer.setData('image/jpg' ,event.currentTarget.id);

}

接下來是拖曳於最後的置放事件，列舉如下：

function dragoverHandler(event) {

event.preventDefault();

}

function dropHandler(event) {

var did = event.dataTransfer.getData('image/jpg');

var d = document.getElementById(did);

event.currentTarget.appendChild(d);

}

dropHadler() 於使用者放下圖片時，從儲存區取出資料，然後調用 appendChild() 將其附加至目前的目標區域。而 dragoverHadler() 調用了 preventDefault() 方法，讓目標區域能夠允許配置拖曳過來的元素。以下是完整的程式碼：

<!DOCTYPE html>

<html >

<head>

function dragstartHandler(event) {

event.dataTransfer.setData('image/jpg',event.currentTarget.id);

}

function dragoverHandler(event) {

event.preventDefault();

}

function dropHandler(event) {

var did = event.dataTransfer.getData('image/jpg');

var d = document.getElementById(did);

event.currentTarget.appendChild(d);

}

</script>

</head>

<body>

<img id="kt" src="images/girl.jpg" draggable="true"

ondragstart="dragstartHandler(event)" />

</div>

<p></p>

<div style="float:left;border: 1px solid #C0C0C0;

width: 360px; height: 380px;margin-left:60px;padding:40px"

ondragover="dragoverHandler(event)"

ondrop="dropHandler(event)" >

</div>

</body>

</html>

》HTML5 全域屬性

HTML5 支援拖曳/置放（Drag and Drop）行為

沒有留言: