Okay. So I need to figure out how to make drag and drop work so I can reorder lists.
This shouldn't be so hard. Plenty of React apps can do this.
Let's think about it first. I have two parts to solve.
Part I - The Frontend: This is where I have to figure out how to make the drag and drop interaction when the user drags and drops on the app.
Part II - The Backend: This is where I need to figure out how to save the order of the list once a user reorders it.
Well... I could either start from scratch and write my own solution, or just do a quick search on the internet and see what solutions already exist. Probably a better idea to save time and use a pre-existing solution. To the search bar!
The Options
The results are in! There's a few solutions out there that people are using.
-
React beautiful DnD This one is very popular. The only issue is, it is outdated and no longer going to be maintained. It is created by Atlassian though, but they recommend another library now. More on this later. I think this library is possibly built on top of, or uses is deeply inspired by React DnD, which hasn't been updated for a couple of years now.
-
dnd-kit This one seems to be designed to be easy to use and allows customisation, but I need to find some examples to figure out how it works exactly.
-
Framer Motion This is an animation library from Framer; the website builder. They have a component called Reorder in this library. Seems very simple to implement and use, but I'm not sure if I can customise it much.
-
Pragmatic Drag and Drop This is the new library that Atlassian created to replace React beautiful DnD. Seems to have a lot of documentation with some good examples on how to use it. The only issue is, there is quite a lot of abstraction to figure out on how to use this library.
The Decision
React beautiful DnD was my initial choice since there's a lot of examples on how to use it, but since it is getting discontinued; it doesn't seem to play nice with more recent versions of React and Next.js. So I will have to skip this one.
Framer Motion seems very simple to implement, but the lack of customisation makes me think it isn't the best solution to use.
This leaves me with dnd-kit and Pragmatic Drag and Drop.
dnd-kit seems simple enough to use with a few examples, but the documentation doesn't seem as extensive as Pragmatic Drag and Drop. I think I will experiment with using this library for another time.
For that reason, I think I will go with Pragmatic Drag and Drop. Considering Atlassian uses it in their own products and the have a lot of documentation and examples, I think this is the best option. The only issue is, since the library is quite recent; there is not much out there if I run into any issues. This means I will have to solve these issues the old fashion way, by debugging things with a debugger.
The Implementation
Pragmatic Drag and Drop (PDnD) has a fair bit of abstraction, so it took me some time to figure out how it all works. Luckily there is a simple example here.
After going through the code from this example, reading the docs and looking at the source code of the library, I was able to understand how to implement the library.
The app I am building has drag and drop lists in different situations and locations. Essentially I have a main list, and then I had a nested list within each element.
The most logical approach I thought was to build two React components. One for the list itself, and the other for the draggable element.
With these components, I would then customise them to render differently according to the type of content required.
Drag and drop on the app list
Drag and drop on the stack list
And it works!
Now it is time to figure out how to do the backend and save the order of these lists. For that read Part II.
Update: I actually realised that the PDnD library was the best solution when dealing with the backend approach that I decided with.