How to do drag and drop with Reactjs?

There are several ways to handle drag and drop scenarios in React. But, the general idea is using the HTML5 Drag and Drop API in conjunction with React’s state management.

However, for complex scenarios, it’s a good idea to use libraries such as `react-dnd`. Here is a simple step-by-step guide to using `react-dnd`:

1. Install the `react-dnd` and `react-dnd-html5-backend` packages:

```
npm install react-dnd react-dnd-html5-backend
```

1. Import the DndProvider component and the HTML5Backend module in your main component (usually App.js):

```
import { DndProvider } from ‘react-dnd’;
import { HTML5Backend } from ‘react-dnd-html5-backend’;
```

1. Wrap your main component with the DndProvider component:

```
function App() { return ( {/* Your components go here */} );
}
```

1. Create a Draggable component that leverages the `useDrag` hook from `react-dnd`:

```
import React from ‘react’;
import { useDrag } from ‘react-dnd’

function DraggableComponent() { const [{isDragging}, drag] = useDrag({ item: { type: ‘ITEM’ }, collect: monitor => ({ isDragging: !!monitor.isDragging(), }), });

return (

DRAG ME

); }

export default DraggableComponent;
```

1. Similarly, create a Droppable component that uses the `useDrop` hook:

```
import React from ‘react’;
import { useDrop } from ‘react-dnd’

function DroppableComponent() { const [{ isOver, canDrop }, drop] = useDrop({ accept: ‘ITEM’, drop: () => ({ name: ‘DroppableComponent’ }), collect: monitor => ({ isOver: monitor.isOver(), canDrop: monitor.canDrop(), }), });

return (

DROP HERE

); }

export default DroppableComponent;
```

1. Use your Draggable and Droppable components inside your main component:

```
function App() { return ( );
}
```

Notice the `accept` field in the Droppable component corresponds to the `type` field in the Draggable component. This is how you determine which components can be dropped where.

For more information and advanced usage, please check the official documentation of `react-dnd`.