jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante HTML, CSS y jQuery. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. La opción de ayuda ordenable de jQuery UI se usa para permitir que se use un elemento auxiliar para arrastrar la visualización.
Sintaxis:
Inicializando el ordenable con la opción auxiliar.
$( ".selector" ).sortable({
helper: "clone"
});
-
Configuración de la opción auxiliar.
$( ".selector" ).sortable( "option", "helper", "clone" );
-
Obtener la opción de ayudante.
var helper = $( ".selector" ).sortable( "option", "helper" );
Esta opción admite varios tipos:
- String: si el valor de esta opción se establece en «clonar», el elemento se clonará y el clon se arrastrará.
- Función: esta es una función que devolverá un elemento DOM para usar mientras se arrastra. La función recibe el evento y el elemento que se está ordenando.
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: Este ejemplo demuestra la opción de ayuda ordenable de jQuery UI .
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>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>jQuery UI Sortable helper Option</h3>
<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>
<input type="button" id="Button"
value="Value of the helper Option">
<div id="log"></div>
</center>
<script>
$(function () {
$("#sortable").sortable({
helper: "clone"
});
$("#sortable").sortable("option", "helper", "clone");
$("#Button").on('click', function () {
var a = $("#sortable").sortable(
"option", "helper");
$("#log").html(a);
});
});
</script>
</body>
</html>
Producción:
Opción de ayuda ordenable de jQuery UI
Referencia: https://api.jqueryui.com/sortable/#option-helper
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA