介紹
HTML拖放API依賴于文檔對象模型來擷取有關所拖放内容的資訊。結果，它允許我們拖放網頁上的任何元素，并且幾乎所有主流浏覽器都支援它。使用JavaScript事件處理程式，我們可以将任何元素變成可拖動的項目或可以放置元素的項目。
在本文中，我們将學習如何使用HTML拖放API。讓我們開始吧。
在我們開始解釋該API之前，我們先來看一下這個案例，截圖如下：
如果你想看完整代碼的話，可以到Codepen上看，
代碼位址：https://codepen.io/MehdiAoussiad/pen/bGwOwyb
這個案例是通過使用HTML拖放API來完成的。看起來似乎很複雜，現在，我們開始研究制作此示例的所有部分。
讓我們開始吧。
讓我們從HTML開始。
在HTML結構中，我們将建立三個div：一個可拖動div和兩個div，我們将在其中拖放可拖動的div。
可拖動的div必須将draggable屬性設定為true。然後，我們将添加一些HTML拖放事件屬性，以便在JavaScript中進行處理。
這是HTML示例代碼：
<body>
<p>Drag and Drop the violet rectangle in other rectangles.</p>
<div id="dropHere" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div id="div" draggable="true" ondragstart="drag(event)"></div>
<br>
<div id="dropHere" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body> 接着，我們繼續設定CSS。
是以，現在，我們将使用CSS設定元素樣式。你可以閱讀下面的代碼以檢視我們的樣式表。
CSS代碼如下：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100Vh;
}
p{
margin: 10px;
}
#dropHere{
width: 300px;
height: 80px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
#div{
background: blueviolet;
width: 280px;
height: 70px;
cursor: grabbing;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
} 最終輸出效果：
最後，是JavaScript部分。
使用JavaScript，我們将通過建立函數來處理在HTML中添加的拖放事件屬性。
這是JavaScript代碼：
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
} 之後，你将能夠在其他兩個矩形div之間拖放紫色div。現在讓我詳細解釋所有這些：
1、在HTML中，我們必須為violet div指定一個draggable屬性設定true，以使其成為可拖動元素。
2、ondragstartdraggable元素中的屬性調用一個函數drag（event），該函數指定要拖動的資料。該dataTransfer.setData()方法設定資料類型和拖動資料的值。
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
} 3、對于其他兩個放置紫色矩形的div，事件ondragover 指定可以在何處放置拖動的資料。因為預設情況下，不能将元素拖放到其他元素中。為了允許删除，我們event.preventDefault()在函數中調用方法allowDrop。
4、現在我們隻需要删除即可。當拖放的資料被放置時，發生放置事件。這是通過ondrop調用函數drop（event）的屬性完成的：
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
} 到這裡，我們進行調用preventDefault以防止浏覽器對資料進行預設處理（預設情況下是作為下拉菜單中的連結打開的）。
我們使用方法獲得拖動的資料dataTransfer.getData。此方法将傳回該方法中設定為相同類型的所有資料setData()。
所拖動的資料是所拖動元素的ID（“ div”）。
最後，我們将拖動的元素附加到drop元素中。
結論
拖放API是每個Web開發人員都必須了解的事情。除了拖放以外，它還提供了多個其他選項來自定義你的操作。我建議你從其他資源中了解更多有關它的資訊。
感謝你閱讀本文，希望它對你有用。