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

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

　　什么是拖放？

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

　　如何使用簡單的 JavaScript 使拖放效果？

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

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

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

　　代碼

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

　　代碼

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

　　腳本代碼

　　這個腳本代碼是如何工作的？

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

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

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

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

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

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

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

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

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

　　結(jié)論

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