》HTML5 全域屬性
HTML5 對介面互動操作的程式化控制支援,最重要的莫過於拖曳/置放(Drag and Drop)行為了,要在網頁上支援拖曳操作,基本上必須處理 dragstart 、 dragover 與 drop 這三個事件。
除此之外,準備支援拖曳作業的 DOM 物件,其 draggable 屬性必須為 true 。
第一個事件 dragstart 於被拖曳的物件上被觸發,它的事件回應函式像這個樣子:
第二與第三個事件於物件被拖曳進入目標區域,完成置放時被觸發,同樣的,它的事件回應函式像這個樣子:
考慮以下的圖示,我們打算讓這個網頁支援拖曳功能,讓使用者可以將在左邊黑色區域中的圖片,拖曳至右邊空白區塊中置放。

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

在拖曳的過程中,圖片是被拖曳的物件,因此註冊其 dragstart 事件並且配置於一個預先指定的 <div> 標籤中,也就是截圖中的黑色區塊,右邊的拖曳目標空白區塊是一個 <div> 標籤,為其註冊 dragover 與 drop 事件,畫面內容的配置如下:
現在撰寫對應的事件回應函式,首先是 dragstartHadler(event) ,內容如下,透過 event 參數引用 dataTransfer 調用 setData() 將存使用者拖曳資料的相關資訊儲存至暫存區。
接下來是拖曳於最後的置放事件,列舉如下:
dropHadler() 於使用者放下圖片時,從儲存區取出資料,然後調用 appendChild() 將其附加至目前的目標區域。而 dragoverHadler() 調用了 preventDefault() 方法,讓目標區域能夠允許配置拖曳過來的元素。以下是完整的程式碼:
》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>
<div style="…">
<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>
<title></title>
<script >
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>
<div style="float:left;height: 380px; width:360px;background:black;padding:40px">
<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 全域屬性
沒有留言:
張貼留言