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

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

　　理解

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

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

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

　　還有一些工作可以使容器準(zhǔn)備好接受可拖動(dòng)的項(xiàng)目。

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

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

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

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

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

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

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

　　接下來，我們將開始使容器準(zhǔn)備好與可拖動(dòng)組件進(jìn)行交互。

　　處理事件

　　我們將依賴于 3 個(gè)事件：

　　拖動(dòng)回車鍵 (dragenter)

　　拖動(dòng) (dragover)

　　落 (drop)

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

　　可拖動(dòng)和容器之間的交互

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

　　另外，讓我們?cè)趹?yīng)用程序中使用我們的 Box 組件：

　　立即試用您的應(yīng)用程序!如果拖動(dòng)并四處移動(dòng)，您將在鼠標(biāo)旁邊看到此圖標(biāo)：drag me

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

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

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

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

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

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

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

　現(xiàn)在再次嘗試你的應(yīng)用，你將能夠?qū)⒖赏蟿?dòng)的可拖動(dòng)內(nèi)容從一個(gè)容器移動(dòng)到另一個(gè)容器！

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