dnd kit

• 功能豐富：可自訂的碰撞偵測演算法、多個啟動器、可拖曳覆蓋、拖曳手把、自動捲動、約束等等。
• 為 React 建置：公開諸如useDraggable和useDroppable之類的鉤子。並且不會強迫您重新建構應用程式或建立額外的包裝 DOM 節點。
• 支援廣泛的用例：列表、網格、多個容器、嵌套上下文、可變大小的項目、虛擬化列表、2D 遊戲等。
• 零依賴和模組化：庫的核心縮小後重量約為 10kb，且沒有外部依賴。它是圍繞內建的 React 狀態管理和上下文構建的，這使庫保持了精簡。
• 內建支援多種輸入法：指標、滑鼠、觸控和鍵盤感應器。
• 完全可自訂和可擴展：自訂每個細節：動畫、轉換、行為、樣式。建立您自己的感測器、碰撞檢測演算法、自訂按鍵綁定等等。
• 輔助功能：鍵盤支援、合理的預設詠嘆調屬性、可自訂的螢幕閱讀器說明和內建的即時區域。
• 性能：它在構建時考慮了性能，以支援絲般流暢的動畫。
• 預設：需要建立可排序的介面？查看@dnd-kit/sortable ，它是建構在@dnd-kit/core之上的薄層。未來會有更多預設。

文件

若要了解如何開始使用dnd kit ，請造訪官方文件網站。您將找到深入的 API 文件、提示和指南，幫助您建立拖放介面。

關鍵概念

dnd 套件的核心庫公開了兩個主要概念：

• 可拖曳元素
• 可投放區域

使用useDraggable和useDroppable鉤子增強現有元件，或將兩者結合起來創建可以拖放的元件。

使用<DndContext>提供者處理事件並自訂可拖曳元素和可放置區域的行為。配置感測器以處理不同的輸入方法。

使用<DragOverlay>元件呈現可拖曳的覆蓋層，該覆蓋層從正常文件流中刪除並相對於視口定位。

查看我們的快速入門指南以了解如何開始。

可擴展性

可擴充性是dnd kit的核心。它的構建是精益且可擴展的。它附帶了我們相信大多數人大部分時間都會想要的功能，並提供了擴展點來在@dnd-kit/core之上構建其餘部分。

dnd 套件可擴充性等級的一個主要範例是可排序預設，它是使用@dnd-kit/core公開的擴充點建構的。

dnd 套件的主要擴充點是：

• 感應器
• 修飾符
• 約束條件
• 自訂碰撞檢測演算法

無障礙

建立可存取的拖放介面很困難； dnd 套件有許多合理的預設值和起點，可協助您讓拖放介面易於存取：

• 有關如何與可拖曳項目互動的可自訂螢幕閱讀器說明
• 可自訂的即時區域更新，可即時提供螢幕閱讀器公告，告知可拖曳元素目前發生的情況。
• 應傳遞給可拖曳項目的aria屬性的合理預設值

請查看我們的輔助使用指南，以詳細了解如何幫助為螢幕閱讀器提供更好的體驗。

建築學

與大多數拖放庫不同， dnd 套件故意沒有建立在 HTML5 拖放 API 之上。這是一個經過深思熟慮的架構決策，確實會帶來一些權衡，您在決定使用它之前應該意識到這一點，但對於大多數應用程式來說，我們認為利大於弊。

HTML5 拖放 API 有一些嚴重的限制。它不支援觸控裝置或使用鍵盤拖曳項目，這意味著建立在其之上的庫需要公開完全不同的實作來支援這些輸入方法。它也不支援常見用例，例如鎖定拖曳到特定軸或容器的邊界、自訂碰撞偵測策略，甚至自訂拖曳專案的預覽。

雖然其中一些問題有解決方法，但這些解決方法通常會增加程式碼庫的複雜性和庫的整體套件大小，並導致滑鼠、觸控和鍵盤層之間的不一致，因為它們由完全不同的實作提供支援。

不使用 HTML5 拖放 API 的主要缺點是您將無法從桌面或視窗之間拖曳。如果您想到的拖放用例涉及此類功能，那麼您肯定會想要使用基於 HTML 5 拖放 API 建置的程式庫。我們強烈建議您查看react-dnd，以了解具有本機 HTML 5 拖放後端的 React 程式庫。

表現

最小化 DOM 突變

dnd 套件可讓您建立拖放介面，而無需在每次項目需要移動位置時變更 DOM。

這是可能的，因為當啟動拖曳操作時， dnd 套件會延遲計算並儲存可放置容器的初始位置和佈局。這些位置將傳遞到使用useDraggable和useDroppable的元件，以便您可以在拖曳操作正在進行時計算專案的新位置，並使用不會觸發重繪的高效能 CSS 屬性將它們移動到新位置，例如translate3d和scale 。有關如何實現這一點的範例，請查看@dnd-kit/sortable庫所公開的排序策略的實作。

這並不是說在拖曳時不能移動 DOM 中項目的位置，這是受支援的，有時是不可避免的。在某些情況下，除非將項目移至 DOM 中，否則無法事先知道項目的新位置和佈局。只需要知道，拖曳時對 DOM 進行的此類突變成本要高得多，並且會導致重新繪製，因此如果可能的話，更喜歡使用translate3d和scale來計算新位置。

綜合事件

dnd 套件還對所有感測器的啟動器事件使用 SyntheticEvent 偵聽器，這比手動向每個單獨的可拖曳節點添加事件偵聽器提高了效能。

在@dnd-kit儲存庫中工作

此儲存庫中包含的套件

• @dnd-kit/core
• @dnd-kit/accessibility
• @dnd-kit/sortable
• @dnd-kit/modifiers
• @dnd-kit/utilities

安裝依賴項

您需要在根目錄中安裝所有相依性。由於@dnd-kit是一個使用 Lerna 和 Yarn 工作區的 monorepo，因此不支援 npm CLI（僅支援yarn）。

yarn install

這將在每個專案中安裝所有依賴項，建立它們，並透過 Lerna 符號連結它們

開發流程

在一個終端機中，並行運行yarn start ：

yarn start

這會將每個套件建置​​到<packages>/<package>/dist並在監視模式下執行項目，因此您在<packages>/<package>/src中儲存的任何編輯都會導致重建到<packages>/<package>/dist 。結果將串流傳輸到終端。

跑步故事書

yarn start:storybook

執行故事書 開啟 http://localhost:6006 以在瀏覽器中查看它。

與遊樂場合作

您可以在由 Parcel 供電的遊樂場中玩本地包。

yarn start:playground

這將在localhost:1234上啟動 Playground。如果您讓 lerna 在一個終端中以平行模式運行 watch，然後運行 Parcel，則當您對來源位於packages/*/src/*內部的任何導入模組進行更改時，您的Playground 將會熱重載。請注意，為了實現此目的，每個套件的start命令都會向 TDSX 傳遞--noClean標誌。這可以防止 Parcel 由於「找不到檔案」錯誤而在重建之間爆炸。

重要的安全提示：在 Playground 中新增/更改套件時，請在 package.json 中使用alias物件。這將告訴 Parcel 將它們解析到檔案系統，而不是嘗試從 NPM 安裝軟體包。它還修復了您可能遇到的重複 React 錯誤。

奔跑的柏樹

（在第三個終端機中）您可以執行 Cypress，它將針對 Storybook 執行整合測試。