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.
Javascript
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:
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA