今天是有關(guān)如何創(chuàng)建一組 React 組件來處理拖放的教程。拖放是互聯(lián)網(wǎng)的奧秘之一。我們在開發(fā)人員的生活中都用過一次它們，但實際上我們從未想過它是如何工作的。好吧，今天，它會改變！

　　本文僅供參考。所有框架都有大量的拖放庫，我強烈建議您使用其中之一！

　　理解

　　在開始任何編碼之前，讓我們嘗試進一步了解拖放的工作原理。

　　拖放主要由瀏覽器處理。要允許元素可拖動，您所要做的就是將屬性添加到draggable="true"div

　　懸垂和掉落與容器系統(tǒng)一起工作。一個容器將包含您的可拖動項目，您將它拖放到另一個容器中。

　　還有一些工作可以使容器準備好接受可拖動的項目。

　　最后，我們必須處理丟棄并更新我們的狀態(tài)。

　　就這么簡單！讓我們看看它如何與 React 配合使用。

　　創(chuàng)建我們的組件

　　在開始使用拖放之前，我們將開始創(chuàng)建組件，以使我們的生活更輕松。

　　首先，讓我們創(chuàng)建可拖動的項目。此項目將是一個簡單的文本，以便我們可以拖動它。我們還將屬性設置為 true。draggable

　　接下來，讓我們創(chuàng)建一個 Box 組件。此組件將是一個容器，用于容器可拖動的項：

　　同樣在我們的課程中，您將找到該課程：App.cssbox

　　接下來，我們將開始使容器準備好與可拖動組件進行交互。

　　處理事件

　　我們將依賴于 3 個事件：

　　拖動回車鍵 (dragenter)

　　拖動 (dragover)

　　落 (drop)

　　我們將在這方面對待 和 相同，但兩者都需要使用。dragenterdragover

　　可拖動和容器之間的交互

　　為了使可拖動的項和容器交互，我們的第一步是調(diào)用 when 或 trigger。通過這樣做，我們的容器將成為一個有效的目標：

　　另外，讓我們在應用程序中使用我們的 Box 組件：

　　立即試用您的應用程序!如果拖動并四處移動，您將在鼠標旁邊看到此圖標：drag me

　　根據(jù)您的操作系統(tǒng)，它會顯示一些不同，但你會認出它！

　　您可能已經(jīng)注意到，此圖標也顯示在當前所選圖標的上方。這不是我們想要的。

　　讓我們稍微更改一下代碼，使其不在初始框中顯示此圖標：

　　移動我們的可拖動并保持狀態(tài)

　　我們要做的第一件事是為選擇添加一個狀態(tài)(我們將在此處使用位置)，并以編程方式呈現(xiàn) Box：

　　我知道使用索引作為鍵是一種不好的做法，但由于此示例非常簡單，我無法使用其他任何內(nèi)容。

　　在 box 組件中，讓我們處理 drop 事件并調(diào)用回調(diào)：onSelect

　現(xiàn)在再次嘗試你的應用，你將能夠?qū)⒖赏蟿拥目赏蟿觾?nèi)容從一個容器移動到另一個容器！

　　我希望這篇文章能幫助你更好地理解拖放是如何工作的！