這篇文章說明拖曳的基本概念。
建立可拖曳的內容
在多數瀏覽器中,文字選取文字、圖片和連結預設為可拖曳。舉例來說,如果您在網頁上拖曳連結,就會看到包含標題和網址的小方塊,您可以將該方塊拖放到網址列或桌面上,建立捷徑或前往該連結。如要將其他類型的內容設為可拖曳,您必須使用 HTML5 拖曳 API。
如要將物件設為可拖曳,請為該元素設定 draggable=true
。幾乎任何項目都可以拖曳,包括圖片、檔案、連結、檔案或任何網頁上的任何標記。
以下範例會建立介面,並重新排列與 CSS 格線重疊的資料欄。資料欄的基本標記如下所示,其中每個資料欄的 draggable
屬性都設為 true
:
<div class="container">
<div draggable="true" class="box">A</div>
<div draggable="true" class="box">B</div>
<div draggable="true" class="box">C</div>
</div>
以下是容器和 Box 元素的 CSS。唯一與拖曳功能相關的 CSS 是 cursor: move
屬性。其餘程式碼會控制容器和方塊元素的版面配置和樣式。
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.box {
border: 3px solid #666;
background-color: #ddd;
border-radius: .5em;
padding: 10px;
cursor: move;
}
您可以拖曳項目,但其他項目不會有任何改變。如要新增行為,您必須使用 JavaScript API。
監聽拖曳事件
如要監控拖曳程序,您可以監聽下列任一事件:
如要處理拖曳流程,您需要某種來源元素 (拖曳的開始位置)、資料酬載 (拖曳的項目) 和目標 (可擷取放置的區域)。來源元素可以是任何類型的元素。目標為放置區域或一組放置區域,會接受使用者嘗試捨棄的資料。並非所有元素都可以設為目標。舉例來說,目標不能是圖片
開始及結束拖曳序列
在內容上定義 draggable="true"
屬性後,附加 dragstart
事件處理常式以啟動各欄的拖曳序列。
此程式碼會在使用者開始拖曳時,將資料欄的不透明度設為 40%,並在拖曳事件結束時恢復為 100%。
function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
}
let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragend', handleDragEnd);
});
您可以在以下 Glitch 示範中檢視結果。拖曳項目及其不透明度變更。由於來源元素有 dragstart
事件,因此將 this.style.opacity
設為 40% 可讓使用者透過視覺回饋得知該元素是目前移動的選取項目。捨棄項目後,即使您尚未定義放置行為,來源元素仍會恢復至 100% 不透明度。
新增其他視覺提示
為協助使用者瞭解如何與您的介面互動,請使用 dragenter
、dragover
和 dragleave
事件處理常式。在這個範例中,資料欄除了可拖曳,也是放置目標。當使用者按住拖曳的項目在資料欄上方時,將邊框設定為虛線,以協助使用者瞭解這點。舉例來說,您可以在 CSS 中為放置目標的元素建立 over
類別:
.box.over {
border: 3px dotted #666;
}
接著,在 JavaScript 中設定事件處理常式,在拖曳資料欄時加入 over
類別,並在拖曳的元素退出時移除類別。我們也確保在 dragend
處理常式中,會在拖曳結束時移除類別。
document.addEventListener('DOMContentLoaded', (event) => {
function handleDragStart(e) {
this.style.opacity = '0.4';
}
function handleDragEnd(e) {
this.style.opacity = '1';
items.forEach(function (item) {
item.classList.remove('over');
});
}
function handleDragOver(e) {
e.preventDefault();
return false;
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});
});
在這個程式碼中,有幾個注意事項:
dragover
事件的預設動作是將dataTransfer.dropEffect
屬性設為"none"
。本頁稍後會介紹dropEffect
屬性。目前,只需知道此操作會阻止drop
事件觸發。如要覆寫這項行為,請呼叫e.preventDefault()
。另一個做法是在同一個處理常式中傳回false
。dragenter
事件處理常式是用來切換over
類別,而非dragover
。如果您使用dragover
,當使用者將拖曳的項目停留在資料欄上時,事件會重複觸發,導致 CSS 類別重複切換。這會導致瀏覽器執行大量不必要的轉譯工作,可能會影響使用者體驗。強烈建議您盡量減少重複繪製,如果需要使用dragover
,請考慮節流或解退事件監聽器。
完成放置
如要處理放置,請為 drop
事件新增事件監聽器。在 drop
處理常式中,您必須防止瀏覽器的預設下滑行為,這類行為通常是造成乾擾的重新導向。方法是呼叫 e.stopPropagation()
。
function handleDrop(e) {
e.stopPropagation(); // stops the browser from redirecting.
return false;
}
請務必註冊新處理常式與其他處理常式:
let items = document.querySelectorAll('.container .box');
items.forEach(function(item) {
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragenter', handleDragEnter);
item.addEventListener('dragleave', handleDragLeave);
item.addEventListener('dragend', handleDragEnd);
item.addEventListener('drop', handleDrop);
});
如果您這時執行程式碼,商品不會丟到新位置。如要這麼做,請使用 DataTransfer
物件。
dataTransfer
屬性會保留透過拖曳動作傳送的資料。dataTransfer
是在 dragstart
事件中設定,且會在放置事件中讀取或處理。呼叫 e.dataTransfer.setData(mimeType, dataPayload)
可讓您設定物件的 MIME 類型和資料酬載。
在這個範例中,我們要讓使用者重新排列欄的順序。為此,您必須先在拖曳開始時儲存來源元素的 HTML:
function handleDragStart(e) {
this.style.opacity = '0.4';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
在 drop
事件中,您可以將來源資料欄的 HTML 設為目標欄的 HTML,藉此處理資料欄捨棄作業。這包括檢查使用者不會退回他們拖曳的同一資料欄。
function handleDrop(e) {
e.stopPropagation();
if (dragSrcEl !== this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
您可以在下方示範中查看結果。這項動作須使用電腦版瀏覽器。行動裝置不支援 Drag and Drop API。拖曳並放開 B 欄頂端的 A 欄,注意它們改變的位置:
更多拖曳屬性
dataTransfer
物件會顯示屬性,以便在拖曳過程中為使用者提供視覺回饋,並控管每個放置目標回應特定資料類型的方式。
dataTransfer.effectAllowed
會限制使用者可對元素執行的「拖曳類型」。用於拖曳處理模型中,可在dragenter
和dragover
事件期間初始化dropEffect
。屬性可包含下列值:none
、copy
、copyLink
、copyMove
、link
、linkMove
、move
、all
和uninitialized
。dataTransfer.dropEffect
可控制使用者在dragenter
和dragover
事件期間取得的意見回饋。當使用者將遊標懸停在目標元素上時,瀏覽器的遊標會指示正在進行的作業類型,例如複製或移動。效果可能採用下列其中一個值:none
、copy
、link
、move
。e.dataTransfer.setDragImage(imgElement, x, y)
表示可以設定拖曳圖示,而非使用瀏覽器的預設「幽靈圖片」回饋。
檔案上傳
這個簡單的範例使用資料欄做為拖曳來源和拖曳目標。這可能會在 UI 中要求使用者重新排列項目。在某些情況下,拖曳目標和來源的元素類型可能會有所不同,就像在介面中,使用者需要將所選圖片拖曳至目標,藉此選取一張圖片做為產品的主要圖片。
使用者經常使用拖曳功能,將桌面項目拖曳到應用程式。主要差別在於 drop
處理常式。檔案會包含在 dataTransfer.files
屬性中,而非使用 dataTransfer.getData()
存取檔案:
function handleDrop(e) {
e.stopPropagation(); // Stops some browsers from redirecting.
e.preventDefault();
var files = e.dataTransfer.files;
for (var i = 0, f; (f = files[i]); i++) {
// Read the File objects in this FileList.
}
}
如要進一步瞭解相關資訊,請參閱「自訂拖曳」。