Cómo arrastrar elementos por la pantalla con React

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo podemos arrastrar elementos por la pantalla con React.

1️⃣ Instalar react-draggable

Primero, instala la librería con npm o yarn:

npm install react-draggable
# o
yarn add react-draggable

2️⃣ Crear el componente de arrastre

Ahora, crearemos un componente básico que se pueda arrastrar:

import React from "react";
import Draggable from "react-draggable";

const DraggableBox: React.FC = () => {
  return (
    <Draggable>
      <div className="w-40 h-40 bg-blue-500 text-white flex items-center justify-center cursor-move rounded-lg shadow-lg">
        Arrástrame
      </div>
    </Draggable>
  );
};

export default DraggableBox;

🔹 Explicación:

• Draggable es un contenedor que permite arrastrar cualquier contenido dentro de él.
• La div dentro de Draggable tiene estilos para que sea visible y fácil de arrastrar.

3️⃣ Usarlo en tu aplicación

Importa y usa el componente en App.tsx o cualquier otro archivo:

import React from "react";
import DraggableBox from "./DraggableBox";

const App: React.FC = () => {
  return (
    <div className="h-screen flex items-center justify-center bg-gray-100">
      <DraggableBox />
    </div>
  );
};

export default App;

---

🔥 Mejoras avanzadas

Si quieres restringir el área de arrastre o manejar eventos cuando se arrastra, puedes usar las props bounds, onStart, onDrag, y onStop:

<Draggable
  bounds="parent"
  onStart={() => console.log("Comenzó el arrastre")}
  onStop={() => console.log("Se soltó el elemento")}
>
  <div className="w-40 h-40 bg-green-500 text-white flex items-center justify-center cursor-move rounded-lg shadow-lg">
    Arrástrame dentro del contenedor
  </div>
</Draggable>

📌 Propiedades útiles de Draggable:

Propiedad	Descripción
bounds="parent"	Restringe el movimiento dentro del contenedor padre.
onStart={fn}	Función que se ejecuta cuando inicia el arrastre.
onStop={fn}	Función que se ejecuta cuando se suelta el elemento.
onDrag={fn}	Función que se ejecuta mientras se está arrastrando.

Ahora ya puedes implementar elementos arrastrables en React de forma sencilla usando react-draggable. Si necesitas una funcionalidad más avanzada como drag and drop entre listas, puedes explorar react-beautiful-dnd o react-dnd.