How do I use drag and drop with React?

By lmartinez, 18 April, 2022

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:

 

react

 

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

Content
Title
Let's work together!
Text Alignment
Left
Webform
Margin
With Large margin top
FAQ's
Question
What is a hook in React?
Answer

React hooks were introduced in React version 16.8 and have since become a favorite among developers. Hooks are functions "functions that allow you to implement additional features such as state and lifecycle methods in lightweight functional components". In addition to those that React gives to developers, it is possible to write your own that adapts to the needs of our application or web.

Question
What is Lazy Loading in React?
Answer

Lazy Loading is a design pattern used to delay loading objects until they are needed, this works to improve performance. React makes the Lazy Loading implementation quite simple to implement, you just need to wrap the import() dynamic import statement with React.lazy.

Question
What are props in React?
Answer

In React, Props refer to properties that play an important role in the development process of an application or web page. Components are the building blocks of React, and these components use Props to enhance their functionality and reuse code.

 

What is the purpose of React Props? As we already know, React is one of the most used JavaScript frameworks in recent years. Accessories have an important function: they pass data from one component to another, thus providing a channel through which components can communicate.

 

There is one rule you need to learn before you start using React Props: all components should work the same way as a pure function (regarding props).
 

Title
Get a quote!
Margin
With Margin vertical
Thumbnail
Image
qa testing
Weight
6
Hero
Title
How do I use drag and drop with React?
Image
Image
Text Color
White
Text Alignment
Left
Size
Medium
Overlay effect
Hide overlay effect
Date
Premium
No