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 widget crea un elemento que se puede arrastrar desde el marcado o el selector.
Descarga EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Sintaxis:
var a = $(".selector").draggable({ });
Propiedades:
- proxy: Es de tipo string o función. Un elemento proxy que se usará para configurar el ‘clon’. Un elemento de clonación se utiliza como proxy. Si se especifica una función, debe devolver un objeto jQuery.
- revert: Es de tipo booleano. El elemento volverá a su posición inicial cuando se detenga el arrastre.
- cursor: Es de tipo string. El cursor CSS que se mostrará al arrastrar.
- delta X : Es de tipo número. La posición del elemento arrastrado x correspondiente al cursor actual.
- delta Y : Es de tipo número. La posición del elemento arrastrado y correspondiente al cursor actual.
- handle : Su tipo es un selector. El controlador que inicia el arrastrable.
- disabled: su tipo es booleano. Si se establece en verdadero, la función de arrastrar se desactivará.
- borde: Su tipo es número. El ancho del arrastre que se puede usar para iniciar la propiedad arrastrable.
- eje: Su tipo es una string. Establece el eje sobre el que se mueven los elementos arrastrados.
- retraso: Su tipo es un retraso. Define el retraso en el tiempo en milisegundos.
Eventos:
- onBeforeDrag: el parámetro es un evento. Se dispara antes de arrastrar.
- onStartDrag: el parámetro es un evento. Se dispara cuando el objeto comienza a arrastrarse.
- onDrag: el parámetro es un evento. Se dispara durante el arrastre.
- onEndDrag: el parámetro es un evento. Se dispara cuando el final de arrastre.
- onStopDrag: el parámetro es un evento. Se dispara cuando se detiene el arrastre.
Métodos:
- options: Devuelve la propiedad options.
- Proxy: si se establece la propiedad proxy, devuelve el proxy de arrastre.
- Habilitar: Habilita la acción de arrastrar.
- disabled: Deshabilita la acción de arrastrar.
Nota: En los siguientes ejemplos, solo se muestran algunos ejemplos, el desarrollador puede probar otras propiedades, eventos y métodos enumerados anteriormente según los requisitos de la aplicación.
Vínculos de CDN: Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.
<script type=”text/javascript” src=”jquery.min.js”></script>
<!–bibliotecas jQuery de EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min. js”></script>
<!–Biblioteca jQuery de EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”></script>
Ejemplo: El siguiente ejemplo demuestra el widget arrastrable de jQuery EasyUI.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- EasyUI specific stylesheets--> <link rel="stylesheet" type="text/css" href="themes/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/mobile.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--jQuery libraries of EasyUI --> <script type="text/javascript" src="jquery.easyui.min.js"> </script> <!--jQuery library of EasyUI Mobile --> <script type="text/javascript" src="jquery.easyui.mobile.js"> </script> <script type="text/javascript"> $(document).ready(function (){ $('#gfg1').draggable({ handle:'#drag1', }); }); $(document).ready(function (){ $('#gfg').draggable({ handle:'#drag', cursor: 'pointer', revert: 'true' }); }); </script> </head> <body> <h1>GeeksforGeeks</h1> <h3>EasyUI Draggable Widget</h3> <div id="gfg"> <div id="drag" style="background:rgb(199, 199, 199); width: 180px;"> <p>Revert Draggable Element <p> </div> </div> <div id="gfg1"> <div id="drag1" style="background:rgb(199, 199, 199); width: 180px;"> <p>Draggable Element <p> </div> </div> </body> </html>
Producción:
Referencia: http://www.jeasyui.com/documentation/