Create sortable drag and drop in React JS using dnd-kit library
On previous article, i already created a guide about how to implement simple drag and drop interface in React JS using dnd-kit library (https://dndkit.com). You can view the previous guide here.
Today, we are going a bit further by implementing drag and drop feature that can be sorted (sortable). dnd-kit library provides this feature by using Sortable component.
In this guide, we will create a simple app that display list of favorite games and each of the game can be dragged around to represent the ranking of the favorite games based on their order.
In this project, i will use following technologies :
- React JS for UI library
- Typescript for language
- CSS Modules for styling
- dnd-kit to implement drag and drop feature
First, i will start by creating an empty React JS project and creating basic initial view for the games list. You can also implement this feature on your existing project.
Then, to implement drag and drop feature we can install dnd-kit library by using command :
npm install @dnd-kit/core
We also must install additional package from dnd-kit to implement sortable feature using command :
npm install @dnd-kit/sortable
Like previous guide, we need to wrap our components that need the drag and drop feature inside of DndContext component (in this case, all of our App component). To implement sortable list feature, we also need to use the SortableContext component to wrap all of our sortable list and provide the items props with the list data.
We also need to use state for the list data so it have the reactivity and change the list when the order changed.
After that, we can create the Sortable Item component by using useSortable hook (in this case, each of the game list item). useSortable hook combines both useDroppable and useDraggable hook, so it can be act as a draggable item and also as a droppable zone.
useSortable hook provides data such as attributes, listeners, setNodeRef to make an element become Sortable Item. It also provides transform and transition CSS property value so it can be dragged around and have nice reordering animation. Like in Draggable component, we can use additional CSS utility class provided by dnd-kit to change the transform variable to CSS property value.
Next, we can start using the Sortable Item inside SortableContext in App component. We need to restructure the element that wrap the list (in this case, the <ul> element) to outside of the SortableContext so the context is directly in touch with the Sortable Item.
Finally, we can start implementing the sortable drag and drop feature by adding logic inside onDragEnd event handle provided by DndContext. In this case, i will create a function to reorder the games list when one of the game have been dragged to a new position. dnd-kit library also provides arrayMove() function to simplify the process or reordering the array elements.
At last, the app is complete and we can drag the game item around. When game item is dropped to new position, the Sortable List will automatically re-sort the list items based on the new position. It also provides nice and beautiful animation when items are reordered.
You can view the full source code in my Github repository : https://github.com/WawanC/react-dnd-kit-sortable
Thank you for reading and you can follow me to read another post about React JS.
