Excerpt

React dnd is a popular library for drag and drop in react. In this tutorial, we will learn how to sort the items manually using drag and drop. You can watch the video of sorting in youtube link as well. The complete demo of the code can be found at the bottom of the tutorial. See the video description of code here in youtube

Introduction

We have App as main component. The App contains Source and Target component. We have implemented the normal drag and drop with source and target component. The App is the parent component which manages the source and target component. We will implement the drag and drop within the target component, to do the sorting of components.

Sorting of components

In order to sort the components inside the Target component, we will have to implement another drag and drop within the target component itself.

We have the app component as the parent component. This app component in turn has source component and the target component. The source component has the list of strings, that is, the names of the browser (Chrome, Safari, Firefox and Edge). The target is the workspace area where you will drop the components to.

react dnd sorting

In order to implement the sorting in the app, we will have to implement the drag and drop again in the target component. We already have the drag and drop between the source component and the target component and we will have the drag and drop inside the target component as well.

In order to implement the drag and drop inside the target component, we will have to create another unique identifier for it which is different from the identifier used between the source and the target. This is because we do not want the component from the source to be dropped directly inside the sortable area. The source component should only be dropped inside the target and the components inside the target should be able to be dragged between themselves. We will look into another tutorial where we will allow the components from the source to be directly dropped inside the target as well as inside the sortable area which is more like sorting and inserting.

As you can see in the code we have again implemented the drag and drop inside the target component but the name of the identifier is item. The source code for it can be found inside the item component.

export default DropTarget(
  'ITEM', 
  {
    drop(props, monitor, component){
        const item = monitor.getItem()
        console.log(monitor.getDropResult());
        const newIndex = props.index;
        const oldIndex = item.index;
        props.moveCard(oldIndex, newIndex)
        return item;
    },

  },
  (connect, monitor)=>{
  return {
      connectDropTarget: connect.dropTarget(),
      isOver: monitor.isOver()
    };
  }
  )(
    DragSource(
      'ITEM',
      {
        beginDrag(props, monitor, collect){
          const item = {
            ...props
          }
          return item;
        }
      },
      (connect, monitor) => {
        return {
          connectDragSource: connect.dragSource(),
          connectDragPreview: connect.dragPreview(),
          isDragging: monitor.isDragging(),
        };
      }
    )(Item)
  )

In the item component I have wrapped the item component with the drag source and the drop target. In the drag source component we are mapping the properties props like connectDragSource, connectDragPreview and isDragging while in the Drop target we are going to map the properties like connectDropTarget. We get title and html from the parent component.

When you start to drag the component, it calls the beginDrag function. Here we are exporting all the properties. When you drop the component it is going to call the drop function inside the Drop target. This drop function will get two indexes - one is the index from the previous position (one from the object from beginDrag function) and second is the index of the new position.

We cal the onDrop function of parent component, which is handled in the App component. By changing the index, we get new array which is sorted. This new array is passed to the child component and rendered in item component.

If you see the official documentation then you can see that they have used the hover function. You can also use hover function but the main logic of sorting is going to remain the same. I did not use hover function because it would make the example unnecessarily complex. I wanted to focus more on the sorting with react-dnd and so that you get the hang of it

Demo application for sorting