En este artículo, vamos a aprender cómo podemos usar el evento de parada arrastrable de jQuery UI. Arrastrable se utilizará para arrastrar el elemento HTML por toda la página web.
jQuery UI Draggable consta de opciones, métodos y eventos. La parada es un ejemplo de un evento arrastrable. Ahora entendamos qué hará exactamente detener el evento. Cuando el usuario comienza a arrastrar cualquier elemento determinado en la página web cuando dejó de arrastrar o soltó el botón del mouse que detendrá el arrastre del elemento, en ese momento podemos usar la función de devolución de llamada para vincular algún evento adicional. Por ejemplo, cuando se detiene el arrastre, el color del texto cambiará, o cuando se detiene el arrastre, el tamaño del cuadro aumenta. Ahora podemos ver esa acción en los siguientes ejemplos.
Sintaxis:
$( ".selector" ).draggable({
stop: function( event, ui ) {
// Write the Code
}
});
Parámetros:
- evento: Este es de tipo evento.
- ui: Es de un tipo de objeto con un objeto vacío que se agrega para hacer consistencia con otros eventos.
- ayudante: este es el objeto auxiliar que se está arrastrando.
- posición: Esta es la posición actual del ayudante como objeto {superior, izquierda}.
- desplazamiento: esta es la posición de desplazamiento del ayudante como objeto {superior, izquierda}.
Enlace CDN: En primer lugar, tenemos que agregar los scripts jQuery UI que se necesitan para el proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/ui/ 1.12.1/jquery-ui.js”></script>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
Ejemplo 1: En este ejemplo, utilizaremos el evento de detención y, a medida que se detenga el arrastre, el color del texto cambiará de negro a azul.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"
integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k="
crossorigin="anonymous">
</script>
<style>
#draggable_box {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery UI Draggable stop event</h3>
<div id="draggable_box">Drag this box.</div>
<script>
$("#draggable_box").draggable({
stop: function (event, ui) {
$(this).css("color", "blue");
},
});
</script>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, cuando se detiene el arrastre, el tamaño de un cuadro aumenta.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"
integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k="
crossorigin="anonymous">
</script>
<style>
#draggable_box {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>jQuery UI Draggable stop event</h3>
<div id="draggable_box">Drag this box.</div>
<script>
$("#draggable_box").draggable({
stop: function (event, ui) {
$(this).animate({
width: "200px",
height: "200px",
backgroundColor: "green",
}, "fast");
},
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/draggable/#event-stop