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 React Package">NPM Package with an example in this article.

Checkout more articles on ReactJS

• popup-with-an-image-in-react" title="How to set a Modal popup with an image in React">How to set a Modal popup with an image in React
• file-on-a-button-click-in-react" title="Open an input file on a button click in React">Open an input file on a button click in React
• How to loop in React JSX
• How to write unit test cases using React Testing Library

Demo Application

Output - Drag and Drop sortable list in React - Clue Mediator

Drag and Drop sortable list in React

1. Install NPM dependencies
2. Create sortable container and element
3. Render sortable list
4. Output

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.

npm i react-sortable-hoc

We’ll use one more package array-move" title="array-move">array-move to move an array item to a different position.

npm i array-move

2. Create sortable container and element

To start the example we will render the following list on page.

['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`.

SortableItem.js

import React from 'react';
import { SortableElement } from 'react-sortable-hoc';

const SortableItem = (props) => {
  return <li>{props.value}</li>
}

export default SortableElement(SortableItem);

SortableList.js

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}>
      ))}
    </sortableitem></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.

App.js

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 class="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}>
    </sortablelist></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..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project