踏入前端工程師領域必備的九堂 HTML5 課(九-上)-Drag and Drop API簡介(上)
踏入前端工程師領域必備的九堂 HTML5 課(九-上)-Drag and Drop API簡介(上)

 

 

HTML5 Drag & Drop API-讓元素變得可拖曳

以前在網頁裡面實現 Drag & Drop 是很麻煩的,需要配合 CSS、onmousedown、onmouseup、setInterval() 等,才能做出元件拖曳的視覺效果。現在 HTML5 有直接的 Drag & Drop 機制,讓前端工程師可直接使用 drag and drop 的功能,讓使用者透過拖曳的方式,把要上傳的檔案拉到瀏覽器當中。

所有的 HTML 元素都能夠設成「可拖曳」的。要讓元素變得可以拖曳,只需要在該元素的原始碼中加入 draggable 屬性,譬如以下的例子 (讓圖片變得可以拖曳):

<img draggable="true" />

HTML5 Drag & Drop API 的範例

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

讓元素可拖放-HTML的部分

除了<a>、<img>,其他 HTML 裡的元素本來是被預設為不可以作為源元素的,也就是我們本來是「拖不動」 它的。但在 HTML5,只要為它加上 draggable="true" 屬性,它就能「被拖曳」了。下面是上例的 HTML 碼的一部分:

See the Pen HTML 5 Drag and Drop by Tedutw (@Tedutw) on CodePen.

draggable 屬性上加了 draggable="true",這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據,因此需要加上下面的代碼。這樣可以確保它可以被拖曳。

See the Pen HTML 5 Drag and Drop-2 by Tedutw (@Tedutw) on CodePen.

Javascript-添加拖曳特效

首先,我們想讓拖曳元素為半透明。我們可以監聽 dragstart 事件:

draggable.addEventListener(“dragstart”,(ev)=> { 
ev.target.style.opacity = “。5” ; 
});

See the Pen HTML 5 Drag and Drop-3 by Tedutw (@Tedutw) on CodePen.

 

然後我們監聽 dragend ,讓它在拖動結束後還原透明度:

draggable.addEventListener(“dragend”,(ev)=> { 
  ev.target.style.opacity = “” ; 
}};

See the Pen HTML 5 Drag and Drop-4 by Tedutw (@Tedutw) on CodePen.

 

接下來,我們希望讓 「Drag Me」元素進入藍色的目標元素時,目標元素變成虛線。於是我們為所有的 dropzone 都監聽了 dragenter 及 dragleave 事件,這樣當我們拖動 「Drag Me」元素進入這些藍色的目標元素時,目標元素的邊框就變成虛線,直到「Drag Me」元素離開時變回實線:

let dropzones = document.querySelectorAll('.dropzone');
dropzones.forEach((dropzone) => {

  dropzone.addEventListener('dragenter', (ev) => {
    ev.preventDefault();
    dropzone.style.borderStyle = 'dashed';
    return false;
  });

  dropzone.addEventListener('dragover', (ev) => {
    ev.preventDefault();
    return false;
  });

  dropzone.addEventListener('dragleave', (ev) => {
    dropzone.style.borderStyle = 'solid';
  });
});

See the Pen HTML 5 Drag and Drop-5 by Tedutw (@Tedutw) on CodePen.

以上 Javascript 重點如下:

 

  • HTML 本身預設為幾乎所有的元素是無法拖曳的,所以上例在 dragenter 與 dragover 中使用 ev.preventDefault() 是為了阻止這樣的預設行為。
  • ev.target 指的是紅色的、寫著「Drop Me」的源元素、dropzone 是指藍色的目標元素,所以在 dragenter 中,我們用 dropzone 參數來修改樣式

 

以上我們完成「拖」的動作,接下來要處理「放」的結果,請見下篇

 

 

 

 

✌推薦閱讀:

 

新手前端工程師需要的 HTML5 入門課 (一)

 

新手前端工程師需要的 HTML5 入門課 (二)

 

新手前端工程師需要的 HTML5 入門課 (三)

 

新手前端工程師需要的 HTML5 入門課 (四)

 

新手前端工程師需要的 HTML5 入門課 (五)

 

新手前端工程師需要的 HTML5 入門課 (六)

 

新手前端工程師需要的 HTML5 入門課 (七)

 

新手前端工程師需要的 HTML5 入門課 (八)

 

新手前端工程師需要的 HTML5 入門課 (九-下)

    uidesignxiaoshow 發表在 痞客邦 留言(0) 人氣()