jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas funciones se pueden implementar mediante la biblioteca jQuery JavaScript. 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.
El jQuery UI Sortable beforeStop Event se usa para desenstringr cuando se detiene la clasificación, pero cuando el marcador de posición/ayudante todavía está disponible.
Sintaxis:
Necesitamos inicializar el widget clasificable con la función de devolución de llamada beforeStop
$( ".selector" ).sortable({
beforeStop : function( event, ui ) {}
});
-
Vincule un detector de eventos al evento sortbeforestop:
$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} );
Parámetros: Estos son los siguientes parámetros que se aceptan.
- evento: este evento se activa cuando la ordenación antes de detener un elemento.
- ui: este parámetro es de tipo objeto con las siguientes opciones.
- ayudante: este parámetro es el objeto jQuery que representa al ayudante ordenado.
- elemento: este parámetro es el objeto jQuery que representa el elemento arrastrado actual.
- desplazamiento: este parámetro es la posición absoluta actual del objeto auxiliar que se representa como {arriba, izquierda}.
- posición: este parámetro es la posición actual del objeto auxiliar que se representa como {arriba, izquierda}.
- posiciónoriginal : este parámetro es la posición original del objeto auxiliar que se representa como {arriba, izquierda}.
- sender: este parámetro es el elemento ordenable de tipo objeto jQuery que proviene del movimiento de un ordenable a otro.
- marcador de posición: este parámetro es el elemento que se utiliza como marcador de posición. Este es de tipo objeto jQuery.
Enlace CDN: a continuación se muestran algunos scripts de jQuery Mobile que se necesitarán para su proyecto, así que agréguelos a 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: Este ejemplo describe los usos de jQuery UI Sortable beforeStop Event.
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-1, #sortable-2 {
list-style-type: none;
width: 150px;
}
#sortable-1 li, #sortable-2 li {
padding: 0.4em;
font-size: 17px;
height: 16px;
color: black;
background-color: green;
}
</style>
<script>
$(function() {
$( "#sortable-1" ).sortable({
beforeStop : function (event, ui) {
$(".res").html ($(".res").html ()
+ "<b>beforeStop</b><br>");
}
});
$( "#sortable-2" ).sortable({
connectWith : "#sortable-1, #sortable-2"
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable beforeStop Event</h4>
<hr />
<div class = "list_data">
<div class = "list_data1">
<h3>Name</h3>
<ul id = "sortable-1">
<li class = "ui-state-default">GFG1</li>
<li class = "ui-state-default">GFG2</li>
<li class = "ui-state-default">GFG3</li>
</ul>
</div>
<div class = "list_data1">
<h3>Mark</h3>
<ul id = "sortable-2">
<li class = "ui-state-default">90</li>
<li class = "ui-state-default">80</li>
<li class = "ui-state-default">70</li>
</ul>
</div>
</div>
<hr />
<div class="res"></div>
</center>
</body>
</html>
Producción:
jQuery UI Ordenable beforeStop Event
Referencia: https://api.jqueryui.com/sortable/#event-beforeStop .
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA