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 的範例
讓元素可拖放-HTML的部分
除了<a>、<img>，其他 HTML 裡的元素本來是被預設為不可以作為源元素的，也就是我們本來是「拖不動」 它的。但在 HTML5，只要為它加上 draggable="true" 屬性，它就能「被拖曳」了。下面是上例的 HTML 碼的一部分：draggable 屬性上加了 draggable="true"，這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據，因此需要加上下面的代碼。這樣可以確保它可以被拖曳。
Javascript -添加拖曳特效
首先，我們想讓拖曳元素為半透明。我們可以監聽 dragstart 事件：draggable.addEventListener（“dragstart”，（ev）=> {
ev.target.style.opacity = “。5” ;
}）;
然後我們監聽 dragend ，讓它在拖動結束後還原透明度：
draggable.addEventListener（“dragend”，（ev）=> {
ev.target.style.opacity = “” ;
}};
接下來，我們希望讓 「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';
});
});
以上 Javascript 重點如下：
- HTML 本身預設為幾乎所有的元素是無法拖曳的，所以上例在 dragenter 與 dragover 中使用 ev.preventDefault() 是為了阻止這樣的預設行為。
- ev.target 指的是紅色的、寫著「Drop Me」的源元素、dropzone 是指藍色的目標元素，所以在 dragenter 中，我們用 dropzone 參數來修改樣式
以上我們完成「拖」的動作，接下來要處理「放」的結果，將在下篇說明!
相關文章
前端工程師的HTML5教學-Drag and Drop API(下)
更簡單、更有利於 SEO的HTML5新語意元素!
前端工程師HTML5入門課-音訊嵌入元素
為了成為前端工程師,我一定要成功-解析CSS語法格式
前端工程師實用工具CSS之邊框屬性解釋
CSS多重名稱之中小小的差別,前端工程師今天教你分辨!
前端工程師只要選對方法就能無痛SEO!!
