How do I use drag and drop with React?

Building an app with React allows you to have a dynamic, interactive, and ideal interface for the digital experience that the user is looking for in 2022. It can be described as a JavaScript library that you can use to create a different user interface through different components that help build and define the structure of your application.

To explain further, React acts as the visible part of your app, it just handles simple data for how your app will look to the public.

What is drag and drop in React?

Well, as its name says, when we talk about drag and drop in an application or website, we refer to the action of selecting a text, box, image, or any file, dragging it, and taking it to the section or place that we want.

How you can use drag and drop in your React app

In order to enable this feature in your React app, you just need to follow a few simple steps:

Step 1: Create a list and make its elements draggable

All we need to do here is pass the draggable prop to each div which makes the elements draggable.

import React, { useState } from 'react';
import './App.css';
 
const App = () => {
 
  const [list, setList] = useState(['Item 1','Item 2','Item 3','Item 4','Item 5','Item 6']);
 
  return (
    <>
    {
    list.map((item, index) => (
      <div style={{backgroundColor:'lightblue', margin:'20px 25%', textAlign:'center', fontSize:'40px'}}
        key={index}
        draggable>
          {item}
      </div>
      ))}
    </>
  );
};
export defaultApp;

Step 2: locate the item to be dragged

We'll use the useRef hook to hold the item we're dragging located, then we'll use onDragStart to drag it and paste it to all the items in this list:

import React, { useState, useRef } from 'react';
import './App.css';
 
const App = () => {
  
  const dragItem = useRef();
  const [list, setList] = useState(['Item 1','Item 2','Item 3','Item 4','Item 5','Item 6']);
 
  const dragStart = (e, position) => {
    dragItem.current = position;
  };
 
  return (
    <>
    {
    list&&
    list.map((item, index) => (
      <div style={{backgroundColor:'lightblue', margin:'20px 25%', textAlign:'center', fontSize:'40px'}}
        onDragStart={(e) => dragStart(e, index)}
        key={index}
        draggable>
          {item}
      </div>
      ))}
    </>
  );
};
export defaultApp;

Step 3: Track items being dragged

In this step, we need to find which element our dragged element is floating on. With UseRef we can achieve this, changing links when the element hovers over another element. The onDragEnter event listener will also do this.

import React, { useState, useRef } from 'react';
import './App.css';
 
const App = () => {
  
  const dragItem = useRef();
  const dragOverItem = useRef();
  const [list, setList] = useState(['Item 1','Item 2','Item 3','Item 4','Item 5','Item 6']);
 
  const dragStart = (e, position) => {
    dragItem.current = position;
    console.log(e.target.innerHTML);
  };
 
  const dragEnter = (e, position) => {
    dragOverItem.current = position;
    console.log(e.target.innerHTML);
  };
 
  return (
    <>
    {
    list&&
    list.map((item, index) => (
      <div style={{backgroundColor:'lightblue', margin:'20px 25%', textAlign:'center', fontSize:'40px'}}
        onDragStart={(e) => dragStart(e, index)}
        onDragEnter={(e) => dragEnter(e, index)}
        key={index}
        draggable>
          {item}
      </div>
      ))}
    </>
  );
};
export defaultApp;

Step 4: Rearrange the list

The last step is to rearrange the list when you manage to place the element you dragged on top of another element or in another place.

import React, { useState, useRef } from 'react';
import './App.css';
 
const App = () => {
  
  const dragItem = useRef();
  const dragOverItem = useRef();
  const [list, setList] = useState(['Item 1','Item 2','Item 3','Item 4','Item 5','Item 6']);
 
  const dragStart = (e, position) => {
    dragItem.current = position;
    console.log(e.target.innerHTML);
  };
 
  const dragEnter = (e, position) => {
    dragOverItem.current = position;
    console.log(e.target.innerHTML);
  };
 
  const drop = (e) => {
    const copyListItems = [...list];
    const dragItemContent = copyListItems[dragItem.current];
    copyListItems.splice(dragItem.current, 1);
    copyListItems.splice(dragOverItem.current, 0, dragItemContent);
    dragItem.current = null;
    dragOverItem.current = null;
    setList(copyListItems);
  };
 
  return (
    <>
    {
    list&&
    list.map((item, index) => (
      <div style={{backgroundColor:'lightblue', margin:'20px 25%', textAlign:'center', fontSize:'40px'}}
        onDragStart={(e) => dragStart(e, index)}
        onDragEnter={(e) => dragEnter(e, index)}
        onDragEnd={drop}
        key={index}
        draggable>
          {item}
      </div>
      ))}
    </>
  );
};
export defaultApp;

This way you can drag an element in your React app.

Do you need to use ReactJS to develop your technological project? Do not hesitate and click here, we can help you.

React Tutorials

You can visit these places for the best React tutorials:

Udemy

One of the most celebrated pages to learn to program in different frameworks and technologies. Thousands of free tutorials are available for anyone interested in taking their first steps in the world of programming. React is part of those tutorials, where you can learn the basics of programming with this technology.

There are several React tutorials on Udemi, but the one recommended by experts in this technology is one called “React  Frontend Web Development for Beginners”.

Other courses available on Udemy:

• React basic in just 1 hour
• reaction basics
• React with Redux, React-Router, Hooks, and Auth0
• Create your first React JS app
• React for Beginners with Hooks — 2022

Coursera

Another Platform is recognized for its different certified courses taught by experts in their respective fields. One of the best they have for ReactJS is Front End Web Development with React and it will teach you your component and JSX then go into some advanced concepts like React routing and designing a single-page app and flow architecture and the creation of Redux clients. - server communication. and how to use the REST API and more.

React Official Page

Yes, also on the official page of this technology you can find several tutorials at your disposal, where they will teach you how to start creating and developing your first application or website. This is an opportunity to learn about this technology, it is always an advantage to get information on the official pages where there is documentation and direct information from the creators.

We recommend you on video