您是否在任何網(wǎng)站或應(yīng)用程序中看到必須將一個(gè)元素從一個(gè)地方移動(dòng)到另一個(gè)地方?元素可以是圖像、文本、視頻等。您主要在編輯器中看到這種類型的功能(可能是其網(wǎng)站，應(yīng)用程序或軟件)。

　　您想在您的網(wǎng)站中構(gòu)建此類功能嗎?如果你不知道如何構(gòu)建它，沒問題，因?yàn)樵诒疚闹校鷮W(xué)習(xí)如何使用簡(jiǎn)單的JavaScript創(chuàng)建此效果。我們將看到的要點(diǎn)，

　　什么是拖放？

　　拖放只是將元素從一個(gè)地方移動(dòng)到另一個(gè)地方的過程。用戶可以通過按下鼠標(biāo)按鈕并選擇可拖動(dòng)元素，然后通過釋放鼠標(biāo)按鈕將該元素拖動(dòng)到可放置元素中。這種效果只不過是拖放效果。

　　如何使用簡(jiǎn)單的 JavaScript 使拖放效果？

　　使用 JavaScript 的拖動(dòng)事件，我們可以使它變得更容易。腳本提供了許多與拖放 HTML DOM 元素相關(guān)的函數(shù)。例如，拖放、拖放、拖放等。別擔(dān)心，我們將在代碼中使用所有這些函數(shù)，我會(huì)向您解釋。

　　說話很便宜，我們來寫代碼：

　　我將展示HTML，CSS和JavaScript的單獨(dú)代碼，最后，我將向您展示整個(gè)代碼。

　　代碼

　　在HTML中，我們什么也沒做。剛剛創(chuàng)建了一個(gè)容器，在容器內(nèi)部，我們添加了多個(gè) div。一個(gè)用于圖像(可拖動(dòng)元素)，另一個(gè)用于我們的可拖放元素。

　　代碼

　　我們將樣式應(yīng)用于我們的 HTML 元素，如容器、img 框、白盒等。

　　腳本代碼

　　這個(gè)腳本代碼是如何工作的？

　　在頂部，我們?cè)L問了HTML元素(一個(gè)是我們的imgBox，第二個(gè)是我們的所有五個(gè)白盒)

　　然后使用添加事件通知器()，我們?cè)?imgBox 上應(yīng)用了拖動(dòng)啟動(dòng)效果。當(dāng)用戶開始拖動(dòng)元素時(shí)，將發(fā)生此事件。在這個(gè)箭頭函數(shù)中，當(dāng)用戶開始拖動(dòng)元素時(shí)，添加我們?cè)谠撛厣咸砑用麨?ldquo;hold”的新類。之后，在我們?cè)O(shè)置的時(shí)間限制內(nèi)，我們又添加了一個(gè)名為“hide”的類。

　　現(xiàn)在，是時(shí)候添加我們最后一個(gè)用于刪除效果的addEventEner()了。當(dāng)用戶開始刪除元素時(shí)，我們添加一個(gè)名為“imgBox”的類。請(qǐng)注意，在樣式中，我們應(yīng)用了所有類的 CSS。

　　現(xiàn)在。我們把for循環(huán)放在這里，以訪問當(dāng)用戶開始刪除元素時(shí)我們制作的所有白框。我們把添加事件通知器()放在imgBox上，以獲得拖曳效果。當(dāng)拖動(dòng)的元素位于放置目標(biāo)上方時(shí)，將發(fā)生此事件。在其中，我們給出了函數(shù) prevent默認(rèn)()。它阻止元素的默認(rèn)操作發(fā)生。

　　imgBox上的第二個(gè)事件接收器()是用于丟棄效果的。當(dāng)拖動(dòng)的元素拖放到放置目標(biāo)上時(shí)，將發(fā)生該事件。在這里，我們將 imgBox( 可拖動(dòng)元素 ) 拖放到用戶放置的可放置元素中。

　　這就是此 JavaScript 代碼或拖放效果背后的邏輯的工作原理。我希望你能理解。這就是你的整個(gè)代碼的樣子，

　　您將獲得的最終結(jié)果

　　我們代碼的輸出結(jié)果

　　這就是使用簡(jiǎn)單的 JavaScript 制作拖放元素的方法。我希望你喜歡它。

　　結(jié)論

　　在本文中，我們學(xué)習(xí)了如何使用 JavaScript 創(chuàng)建拖放元素。我們終于看到了代碼及其結(jié)果?，F(xiàn)在，您可以為您的網(wǎng)站制作更多驚人的拖放功能。