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 el evento de activación de jQuery UI Sortable. Este evento se activa cuando se usan listas conectadas, cada lista conectada al arrastrar comienza a recibirlo.
Sintaxis:
Inicializando el ordenable con la función de devolución de llamada activada especificada:
$( "Selector" ).sortable({ receive: function( event, ui ) {} });
-
Para vincular un detector de eventos al evento sortactivate:
$( "Selector" ).on( "sortactivate", function( event, ui ) {} );
Parámetros: Este evento tiene 2 parámetros:
- event : este evento es un valor de parámetro que especifica cada lista conectada en el arrastre que comienza a recibir cuando se activa un evento.
- ui : este es de tipo objeto con las siguientes opciones dadas:
- ayudante : el objeto jQuery que representa el ayudante ordenado & es de tipo jQuery.
- elemento : el objeto jQuery representa el elemento arrastrado actual y es de tipo jQuery.
- offset : la posición absoluta actual del objeto auxiliar que se representa como {superior, izquierda} y es del tipo Objeto.
- posición : la posición actual del objeto auxiliar que se representa como {superior, izquierda} y es del tipo Objeto.
- posiciónoriginal: la posición original del objeto auxiliar que se representa como {superior, izquierda} y es del tipo Objeto.
- sender : el ordenable del que proviene el elemento si se mueve de un ordenable a otro y es del tipo jQuery.
- marcador de posición : el objeto jQuery que representa 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 activación 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 activate 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({
activate: function(event, ui) {
$("#sortedList").html($("#sortedList").html()
+ "<b>activate event is triggered</b><br>");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>jQuery UI Sortable activate 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:
jQuery UI ordenable activar evento
Referencia: https://api.jqueryui.com/sortable/#event-activate
Publicación traducida automáticamente
Artículo escrito por harshsethi2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA