》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 全域屬性
沒有留言:
張貼留言