Widget arrastrable EasyUI jQuery

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/

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *