How do I use drag and drop with React?

April 18, 2022

Tags: Technologies, IT Staff Augmentation, Tech Trends

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 Java 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 are drag and drop?

 

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, useRef } 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&&
    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;
    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)}
        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


One of the last steps 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.

 

ReactJS Tutorials

 

You can visit these places for the best ReactJS 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. ReactJS is part of those tutorials, where you can learn the basics of programming with this technology.

 

There are several ReactJS tutorials on Udemi, but the one recommended by experts in this technology is one called “React JS 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.

 

ReactJS 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

 

Yes, I liked thiscontent.