jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas características se pueden implementar utilizando jQuery , JavaScript Library. 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, aprenderemos sobre el evento de cambio clasificable de jQuery UI. Durante la clasificación, este evento solo se activará cuando la posición del DOM haya cambiado.
Sintaxis:
Inicializando el ordenable con la función de devolución de llamada de cambio especificada:
$( "Selector" ).sortable({ change: function( event, ui ) {} });
-
Para vincular un detector de eventos al evento sortchange:
$( "Selector" ).on( "sortchange", function( event, ui ) {} );
Parámetros: Este evento acepta 2 parámetros:
- event : es un evento que se activará para cambiar la posición del DOM para el que se aplican complementos clasificables.
- ui : la interfaz de usuario se puede usar para diseñar por su apariencia. Es de un tipo de objeto y contiene los siguientes valores:
- ayudante: el objeto jQuery ilustra el ayudante que se está ordenando y es del tipo jQuery.
- elemento: el objeto jQuery ilustra el elemento arrastrado actual y es de tipo jQuery.
- desplazamiento: la posición absoluta actual del ayudante se representa como {superior, izquierda} y es del tipo Objeto.
- posición: La posición actual del ayudante se representa como {superior, izquierda} y es del tipo Objeto.
- posiciónoriginal : la posición original del elemento representado como {arriba, izquierda} y es de tipo Objeto.
- remitente: la ordenación se realiza con el elemento que proviene si el elemento se mueve de un ordenable a otro y es de tipo jQuery.
- marcador de posición: el objeto jQuery ilustra el elemento que se utiliza como marcador de posición y es de tipo jQuery.
Enlace CDN: agregue los scripts de jQuery Mobile necesarios para 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 : el siguiente ejemplo ilustra la implementación del evento de cambio clasificable de jQuery UI .
HTML
<!DOCTYPE html>
<html>
<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>
<title>jQuery UI Sortable change event</title>
<style>
#sortableList {
list-style-type: none;
}
.geeks {
margin: 10px;
background: lightgreen;
padding: 10px;
border: 1px solid green;
font-size: 25px;
}
</style>
<script>
$(function() {
$('#sortableList').sortable({
change: function(event, ui) {
$("#sortedList").html($("#sortedList").html()
+ "<b>Change event is triggered</b><br>");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>jQuery UI Sortable change event</h2>
<ul id="sortableList">
<li id="Tutorials" class="geeks">
1.Free Tutorials
</li>
<li id="Articles" class="geeks">
2.Millions of articles
</li>
<li id="Webinars" class="geeks">
3.Webinars by Industry Experts
</li>
<li id="Courses" class="geeks">
4.Live, Online and Classroom Courses
</li>
</ul>
<h2>
<span id='sortedList'></span>
</h2>
</center>
</body>
</html>
Producción:
Evento de cambio ordenable de jQuery UI
Referencia: https://api.jqueryui.com/sortable/#event-change
Publicación traducida automáticamente
Artículo escrito por harshsethi2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA