React Drag And Drop List - Beautiful DnD

This example below uses the react-beautiful-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.