React Drag And Drop List - Hello Pangea DnD

This example below uses the @hello-pangea/dnd module which allows vertical or horizontal lists to be reordered by dragging and dropping. It also allows multiple columns to be reordered. This example sends a dummy post of the ID's to /api/hello to demonstrate how to send data to an API. It also saves and loads the state with localStorage

Verdict: This module is good, but it doesn't support grid layouts. A major stumbling block in my opinion, so next up we are going to look at dnd-kit


React Drag And Drop Grid - Dnd Kit

This example below uses the dnd-kit module, as in the previous example I cam also saving the state to localStorage, as well as passing the ID's over to the dummy API end point. This module supports responsive grid layouts.

🍎
1First
🍌
2Second
🍊
3Third
πŸ‰
4Fourth
πŸ‹
5Fifth
πŸ‡
6Sixth
πŸ“
7Seventh
πŸ’
8Eighth
πŸ‘
9Ninth
🍍
10Tenth
πŸ₯
11Eleventh
πŸ₯­
12Twelfth
πŸ₯₯
13Thirteenth
πŸ₯‘
14Fourteenth
πŸ₯¦
15Fifteenth
πŸ₯¬
16Sixteenth
πŸ₯’
17Seventeenth
🌢
18Eighteenth
🌽
19Nineteenth
πŸ₯•
20Twentieth

Verdict: For my use cases I prefer this module, most of my lists I want to create will be grids, and I also prefer the syntax used to create the lists. It also has a lot of other features that I haven't explored yet, but I will be using this module in the future.