How to Create Drag and Drop in Reactjs

To create drag and drop functionality in React JS, you can use the HTML5 Drag and Drop API which allows elements to be dragged and dropped within a web page.

Here are the basic steps to create a drag and drop feature in React JS:

1. Create two components: one for the element that will be dragged, and another for the drop target.
2. In the component for the element that will be dragged, add an event handler for "onDragStart" that sets the data for the drag operation using the "setData" method of the event object.
3. Add event handlers for "onDragOver" and "onDrop" in the component for the drop target.
4. In the "onDragOver" event handler, prevent the default action of the browser by calling the "preventDefault" method of the event object.
5. In the "onDrop" event handler, prevent the default action of the browser, and then retrieve the data from the drag operation using the "getData" method of the event object.
6. Use React state to update the UI based on the data that was dropped.

So here is complete details:

Step 1: Create two components

In the example code, we have only one component called DragAndDrop. However, we can break this down into two components, one for the element that will be dragged and another for the drop target. For instance, we can have a component called DraggableItem for each item in the list, and another component called DropTarget for the area where the items can be dropped.

Step 2: Add an event handler for onDragStart

The onDragStart event is fired when the user starts dragging an element. In the DraggableItem component, we add this event to the element that we want to drag. In the example code, we pass an index to the handleDragStart function so that we know which item is being dragged. We also set the data for the drag operation using the setData method of the event object. In this case, we set the data type to text/html, and the data itself is the parent node of the element being dragged.

Step 3: Add event handlers for onDragOver and onDrop

The onDragOver event is fired when an element is being dragged over a drop target. In the DropTarget component, we add this event to the area where we want to drop the element. In the example code, we prevent the default action of the browser by calling the preventDefault method of the event object.

The onDrop event is fired when an element is dropped onto a drop target. In the DropTarget component, we add this event to the area where we want to drop the element. In the example code, we also prevent the default action of the browser, and then retrieve the data from the drag operation using the getData method of the event object. We then update the state of the component based on the new order of the items.

Step 4: Use React state to update the UI

To update the UI based on the new order of the items, we use React state. In the example code, we have an array of items, and we update this array based on the new order of the items when they are dropped into a new position. We then set the state of the component using the setState method, which will trigger a re-render of the component.

Overall, the HTML5 Drag and Drop API provides a simple way to implement drag and drop functionality in React JS. However, it does have some limitations, such as the fact that it is not compatible with touch screens, and it can be difficult to customize the look and feel of the drag and drop elements. There are also many third-party libraries available that provide more advanced drag and drop features, such as react-beautiful-dnd and react-dnd. These libraries provide more flexibility in terms of customization and also offer features such as nested drag and drop, multi-touch support, and more.