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 parada clasificable de jQuery UI se usa para desenstringr cuando se detiene la clasificación de los elementos de la lista.
Sintaxis:
Inicialice el widget ordenable con la función de devolución de llamada de parada.
$(".selector").selectable({
stop: function( event, ui ) {}
});
Vincule un detector de eventos al evento de parador en corto.
$( ".selector" ).on( "sortstop", function( event, ui ) {} );
Parámetros:
- evento: este evento se activa cuando se detiene la ordenación.
- 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 {superior, 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=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery- 1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo: El siguiente ejemplo demuestra el evento de parada .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
"//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({
stop: function( event, ui ) {
alert("Sortable Event Stopped!")
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable stop 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-stop