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/