Drag and Drop sortable list in React
In this article, we will show you how to implement drag and drop sortable list in React. If you have a list of any elements and you want to implement sorting using Drag and Drop then we’ll look at this simple way to implement it using NPM Package with an example in this article.
Checkout more articles on ReactJS
Demo Application
Drag and Drop sortable list in React
1. Install NPM dependencies
Here we will use the react-sortable-hoc npm package to implement a drag and drop sortable list. Run the following command to install the package.
1 | npm i react-sortable-hoc |
We’ll use one more package array-move to move an array item to a different position.
1 | npm i array-move |
2. Create sortable container and element
To start the example we will render the following list on page.
1 | ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'] |
Let’s create a sortable container and element using the react-sortable-hoc package where we’ll wrap the component using the SortableElement and SortableContainer.
1 2 3 4 5 6 7 8 | import React from 'react'; import { SortableElement } from 'react-sortable-hoc'; const SortableItem = (props) => { return <li>{props.value}</li> } export default SortableElement(SortableItem); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | import React from 'react'; import SortableItem from './SortableItem'; import { SortableContainer } from 'react-sortable-hoc'; const SortableList = (props) => { return ( <ul> {props.items.map((value, index) => ( <SortableItem key={`item-${index}`} index={index} value={value} /> ))} </ul> ); } export default SortableContainer(SortableList); |
3. Render sortable list
Finally, we can use the SortableList.js to render the sortable list and change the index of the item using the array-move package on the onSortEnd event.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import React, { useState } from 'react'; import { arrayMoveImmutable } from 'array-move'; import SortableList from './SortableList'; function App() { const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']); const onSortEnd = ({ oldIndex, newIndex }) => { setItems(prevItem => (arrayMoveImmutable(prevItem, oldIndex, newIndex))); }; return ( <div className="App"> <h3>Drag and Drop sortable list in React - <a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> <SortableList items={items} onSortEnd={onSortEnd} /> </div> ); } export default App; |
After sorting the list, you’ll get the final result in the state variable.
4. Output
Run the application and check the output in the browser.
I hope you find this article helpful.
Follow and Subscribe us for more update. Thank you for reading. Happy Coding..!! 🙂
This is a great tutorial and my list is sorting as expected. However, I’m trying to add a delete button to the items in the list.
Basically, the delete button filters out the target and updates the state list. The state list is getting updated properly but the SortableList is removing the end item instead of rebuilding the list with the new state list.
Hi John,
I am just removing the item from the state list and it’s working.
Can you please share your code?
Good job! I have a question. How can I sort elements from differents list? I mean, drag items from list one to list two. Please help me.