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

　　您想在您的網站中構建此類功能嗎?如果你不知道如何構建它，沒問題，因為在本文中，您將學習如何使用簡單的JavaScript創建此效果。我們將看到的要點，

　　什么是拖放？

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

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

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

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

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

　　代碼

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

　　代碼

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

　　腳本代碼

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

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

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

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

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

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

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

　　您將獲得的最終結果

　　我們代碼的輸出結果

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

　　結論

　　在本文中，我們學習了如何使用 JavaScript 創建拖放元素。我們終于看到了代碼及其結果。現在，您可以為您的網站制作更多驚人的拖放功能。