¿Cómo usar el módulo de reacción arrastrable en ReactJS?

React -draggable module en ReactJS for allowPodemos usar el siguiente enfoque en ReactJS para usar el módulo react-draggable .

Enfoque: en el siguiente ejemplo, hemos utilizado el módulo de reacción arrastrable para demostrar cómo podemos usarlo en nuestra aplicación ReactJS. Hemos importado el componente Arrastrable de la biblioteca y lo usamos en nuestro componente principal de la aplicación, ahora cualquiera que sea el contenido presente dentro de este componente Arrastrable, se puede arrastrar con el mouse por la pantalla. Como en su ejemplo a continuación, tenemos un div con el texto ¡Esta línea se puede mover ahora! que se puede arrastrar como se muestra a continuación en el gif adjunto a continuación.

Accesorios arrastrables:

• allowAnyClick: se utiliza para permitir el arrastre de clics que no sean del botón izquierdo si este valor se establece en verdadero.
• eje: Se utiliza para determinar en qué eje se puede mover el arrastrable.
• límites: se utiliza para indicar los límites del movimiento.
• cancelar: se usa para indicar un selector que se puede usar para evitar la inicialización de arrastre.
• defaultClassName: se utiliza para indicar el nombre de clase de la interfaz de usuario que se puede arrastrar.
• defaultClassNameDragging: se utiliza para indicar el nombre de clase predeterminado para el movimiento de arrastre.
• defaultClassNameDragged: se utiliza para indicar el nombre de clase predeterminado para el movimiento arrastrado.
• defaultPosition: se utiliza para indicar las coordenadas x e y predeterminadas donde se debe iniciar el arrastre.
• disabled: Se utiliza para deshabilitar el componente.
• rejilla: se utiliza para indicar las coordenadas x e y a las que debe ajustarse el arrastre.
• manija: se usa para indicar un selector que se usa como manija que inicia el arrastre.
• offsetParent: se utiliza para pasar nuestro propio offsetParent para cálculos de arrastre.
• onMouseDown: es una función de devolución de llamada que se activa en el evento del usuario que presiona el mouse.
• onStart: es una función de devolución de llamada que se activa cuando comienza el arrastre.
• onDrag: es una función de devolución de llamada que se activa mientras se arrastra.
• onStop: es una función de devolución de llamada que se activa cuando se detiene el arrastre.
• nodeRef: se utiliza para pasar el elemento de referencia del Node al componente subyacente.
• posición: Se utiliza cuando el usuario quiere tener control directo del elemento. Hace que el artículo sea controlado .
• positionOffset: se utiliza para indicar un desplazamiento de posición para empezar. 
• escala: Se utiliza para indicar la escala del lienzo donde se realiza el arrastre.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install react-draggable

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
import Draggable from 'react-draggable';
  
export default function App() {
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>React-Draggable Module</h4>
      <div style={{ width: 660, height: 'auto' }}>
        <Draggable>
          <div>This line can be moved now!</div>
        </Draggable>
      </div>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://www.npmjs.com/package/react-draggable