¿Cómo uso arrastrar y soltar con React?

Crear una aplicación con React te permite tener una interfaz dinámica, interactiva e ideal para la experiencia digital que el usuario está buscando en el 2022. Se puede describir como una biblioteca de Java que puede usar para crear una interfaz de usuario diferente a través de diferentes componentes que ayudan a construir y definir la estructura de su aplicación.

Para explicarlo con más detalle, React actúa como la parte visible de su aplicación, solo administra datos simples para saber cómo se verá su aplicación para el público.

¿Qué es arrastrar y soltar?

Bueno, como su nombre lo dice, cuando hablamos de arrastrar y soltar en una aplicación o sitio web, nos referimos a la acción de seleccionar un texto, cuadro, imagen o cualquier archivo, arrastrarlo y llevarlo hasta la sección o lugar que deseemos. 

Cómo puedes usar arrastrar y soltar en tu aplicación React

Para poder habilitar esta función en tu aplicación React, solo debes seguir unos sencillos pasos:

Paso 1: crea una lista y has sus elementos “arrastables”

Todo lo que tenemos que hacer aquí es pasar el accesorio arrastrable a cada div que hace que los elementos se puedan arrastrar.

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 default App;

Paso 2: localizar el item que será arrastrado

Usaremos el gancho useRef para mantener localizado el item que vamos a arrastras, luego usaremos onDragStart para arrastrarlo y lo pegaremos a todos los ítems de esta lista:

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 default App;

Paso 3: Seguimiento de los elementos que se arrastran

En este paso, debemos encontrar sobre cuál elemento está flotando nuestro elemento arrastrado. Con UseRef podemos lofrar esto, cambiando de enlace cuando el elemento se desplace sobre otro elemento. El detector de eventos onDragEnter también servirá para esto.

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 default App;

Paso 4: Reorganizar la lista

Uno de los últimos pasos es reorganizar la lista cuando ya logras colocar el elemento que arrastraste sobre otro elemento o en otro lugar. 

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 default App;

De esta manera puedes arrastrar un elemento en tu aplicación React.

Tutoriales de ReactJS

Puede visitar estos lugares para acceder a los mejores tutoriales de ReactJS:

Udemy

Una de las páginas más celebradas para aprender a programar en diferentes frameworks y tecnologías. Miles de tutoriales gratuitos están disponibles para cualquier persona interesada en dar sus primeros pasos en el mundo de la programación. ReactJS es parte de esos tutoriales, donde puedes aprender los conceptos básicos de programación con esta tecnología.

Hay varios tutoriales de ReactJS en Udemi, pero el recomendado por expertos en esta tecnología es uno llamado “React JS Frontend Web Development for Beginners”.

Otros cursos disponibles en Udemy:

React basic en solo 1 hora
Fundamentos de reacción
React con Redux, React-Router, Hooks y Auth0
Cree su primera aplicación React JS
React para principiantes con Hooks — 2022

Coursera

Otra Plataforma es reconocida por sus diferentes cursos certificados impartidos por expertos en sus respectivos campos. Uno de los mejores que tienen para ReactJS es Desarrollo web front-end con React y le enseñará su componente y JSX, luego entrará en algunos conceptos avanzados como el enrutamiento de React y el diseño de una aplicación de una sola página y la arquitectura de flujo y la creación de clientes de Redux. -comunicación del servidor. y cómo usar la API REST y más.

Página oficial de ReactJS

Sí, también en la página oficial de esta tecnología puedes encontrar varios tutoriales a tu disposición, donde te enseñarán cómo empezar a crear y desarrollar tu primera aplicación o sitio web. Esta es una oportunidad para aprender sobre esta tecnología, siempre es una ventaja informarse en las páginas oficiales donde hay documentación e información directa de los creadores.

Te recomendamos en video