jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante la biblioteca jQuery JavaScript. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. Se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
El evento de actualización de jQuery UI Sortable se usa para activarse cuando el usuario dejó de ordenar y la posición del DOM cambió.
Sintaxis:
Inicialice el widget ordenable con la función de devolución de llamada de actualización.
$(".selector").selectable({
update: function( event, ui ) {}
});
Vincule un detector de eventos al evento de actualización ordenable.
$( ".selector" ).on( "sortupdate", function( event, ui ) {} );
Parámetros:
- evento: este evento se activa cuando el usuario detuvo la clasificación con un cambio de posición de DOM.
- ui: Este es de tipo objeto con las opciones dadas a continuación.
- ayudante: el objeto jQuery que representa el ayudante ordenado.
- elemento: el objeto jQuery que representa el elemento arrastrado actual.
- desplazamiento: la posición absoluta actual del objeto auxiliar que se representa como {arriba, izquierda}.
- posición: la posición actual del objeto auxiliar que se representa como {arriba, izquierda}.
- posiciónoriginal: la posición original del objeto auxiliar que se representa como {arriba, izquierda}.
- remitente: el elemento clasificable del tipo de objeto jQuery que proviene de pasar de un elemento clasificable a otro.
- marcador de posición: El elemento que se utiliza como marcador de posición. Este es de tipo objeto jQuery.
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/ui/1.12.1/themes/smoothness/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:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
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>
<style>
#sortable {
list-style-type: none;
width: 50%;
}
#sortable li {
margin: 10px 0;
padding: 0.5em;
font-size: 25px;
height: 20px;
}
</style>
<script>
$(function () {
$("#sortable").sortable({
update: function( event, ui ) {
alert("Sortable Event Updated!")
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable update Event</h4>
<ul id="sortable">
<li class="ui-state-default">BCD</li>
<li class="ui-state-default">CAB</li>
<li class="ui-state-default">BAC</li>
<li class="ui-state-default">BCA</li>
<li class="ui-state-default">ABC</li>
</ul>
</center>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/sortable/#event-update