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>
<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 全域屬性

沒有留言: