HTML5 Java 前端工程師

HTML5入門-Drag and Drop API(上)

2019-06-03

要怎麼在HTML5中把元素拖來拖去呢!就用這招……

要怎麼在HTML5中把元素拖來拖去呢!就用這招......
要怎麼在HTML5中把元素拖來拖去呢!就用這招……

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入門-DRAG AND DROP API(下)

 

有利於SEO的HTML5新語意元素排版,還不快學起來!

 

前端工程師HTML5的入門課程-audio音訊嵌入元素

 

為了成為前端工程師,我一定要成功-認識ID選擇器

 

前端工程師CSS補給站之背景顏色設定

 

前端工程師需要的技能,今天一一洩漏給你!

 

前端工程師怎麼與網頁工程師合作無間!!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料