Evento de arrastre arrastrable de jQuery UI

jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas funciones se pueden implementar mediante la biblioteca jQuery JavaScript. jQuery UI es la mejor herramienta para crear interfaces de interfaz de usuario para las páginas web. También se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.

En este artículo, usaremos el evento de arrastre arrastrable de jQuery UI para activar mientras se mueve el mouse durante el arrastre, inmediatamente antes de que ocurra el movimiento actual.

Sintaxis:

Necesitamos inicializar el widget Draggable con la función arrastrar una devolución de llamada:

$( ".selector" ).draggable({
 drag: function( event, ui ) {}
});

Vincule un detector de eventos al evento de arrastre:

$( ".selector" ).on( "drag", function( event, ui ) {} );

Configuración de la restricción de movimiento a través de ui.position:

$( ".selector" ).draggable({
 drag: function( event, ui ) {
   // Keep the left edge of the element
   // at least 100 pixels from the container
   ui.position.left = Math.min( 100, ui.position.left );
 }
});

Parámetros: Estos son los siguientes parámetros que se aceptan.

evento: este evento se activa cuando se arrastra el elemento que se puede arrastrar.
ui: este parámetro es de tipo objeto con las siguientes opciones.
- ayudante: este parámetro es el objeto jQuery que representa el ayudante ordenado.
- desplazamiento: este parámetro es la posición absoluta actual del objeto auxiliar que se representa como {arriba, izquierda}.
- posición: este parámetro es la posición actual del objeto auxiliar que se representa como {arriba, izquierda}.

Enlace CDN: a continuación se muestran algunos scripts de jQuery Mobile que se necesitarán para su proyecto, así que agréguelos a su proyecto.

<enlace rel=”hoja de estilo” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src= “https://code.jquery. com/jquery-1.12.4.js”></script>
<script src= “https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Ejemplo: Este ejemplo describe los usos de jQuery UI Draggable Drag Event.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
    <script src=
"https://code.jquery.com/jquery-1.10.2.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>
  
    <style>
        .dragg {
            width: 90px;
            height: 40px;
            border: 1px solid black;
            background-color: blue;
        }
  
        .dropp2 {
            width: 200px;
            height: 40px;
            border: 1px solid black;
            float: center;
            background-color: green;
        }
    </style>
  
    <script>
        $(function () {
            $(".dropp2").droppable();
            $(".dragg").draggable({
                drag: function (event, ui) {
                    $(".res").html("<b>Draggable Drag.</b><br>");
                }
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <h3>jQuery UI Draggable Drag Event</h3>
  
        <div class="dragg">
            <p>Drag</p>
  
        </div>
        <br>
        <div class="dropp2">
            <p>Drop here</p>
  
        </div>
        <br>
        <div class="res"></div>
    </center>
</body>
  
</html>

Producción:

Evento de arrastre arrastrable de jQuery UI

Referencia: https://api.jqueryui.com/draggable/#event-drag

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta