Componente desplegable EasyUI React

En este artículo, aprenderemos cómo diseñar un widget arrastrable usando jQuery EasyUI. EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados ​​en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores. El componente crea un área que se puede soltar desde el marcado o el selector donde podemos soltar los elementos que se pueden arrastrar.

Accesorios descartables:

• alcance: este accesorio se utiliza para dejar caer alcances.
• deshabilitado: este accesorio se usa para dejar de cambiar el tamaño del área desplegable.

Eventos descartables:

• onDragEnter: el evento asignado se activa cuando el objeto que se puede arrastrar se arrastra hacia adentro.
• onDragOver: el evento asignado se activa cuando se arrastra el objeto que se puede arrastrar.
• onDragLeave: el evento asignado se activa cuando el objeto que se puede arrastrar se arrastra hasta dejarlo.
• onDrop: el evento asignado se activa cuando se suelta el objeto que se puede arrastrar.

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, muévase a ella con el siguiente comando.

cd foldername

Paso 3: después de crear la aplicación ReactJS, importe los módulos EasyUI usando la siguiente sintaxis.

import { Droppable } from "rc-easyui";

Estructura del proyecto: Se verá así.

App.js: 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, Droppable } from 'rc-easyui';
   
class App extends React.Component {
  render() {
    return (
      <div>
        <h2>EasyUI React Draggable Component</h2>
        <Draggable>
          <div style={{ width: '100px',
                        height: '25', 
                        border: '2px solid #ccc',
                        background: 'green'
                      }}>
            <p style={{ textAlign: 'center',
                        fontsize: '24px' }}>
              Geeksforgeeks
            </p>
  
          </div>
        </Draggable>
        <Droppable
          onDragEnter={() => this.setState({ isover: true })}
          onDragLeave={() => this.setState({ isover: false })}
          onDrop={() => this.setState({ dropped: true })}
        >
          <div>
            <p style={{ textAlign: 'center' }}>Drop here</p>
  
          </div>
        </Droppable>
      </div>
    );
  }
}
   
export default App;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando.

npm start

Producción: