jQuery UI es una tecnología basada en la web y consta de widgets GUI, efectos visuales y temas implementados mediante 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 cómo usar jQuery UI Sortable connectWith Option . Con esta opción, un selector de otros elementos ordenables a los que se deben conectar los elementos de esta lista. Para estar conectado en ambas direcciones, la opción connectWith debe estar configurada en ambos elementos ordenables. El valor predeterminado de esta opción es «falso».
Sintaxis:
La opción connectWith toma un tipo de valor Selector y la sintaxis es la siguiente.
$( ".selector" ).sortable({
connectWith: "#shopping-cart"
});
-
Obtener la opción connectWith
var connectWith = $( ".selector" ) .sortable( "option", "connectWith" ); -
Establecer la opción connectWith
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );
Enlace CDN: Se necesitarán los siguientes scripts de jQuery Mobile para su proyecto, por lo que debemos agregar estos scripts 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 connectWith Option.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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>
.list {
background-color: green;
border: 1px solid gray;
}
.items {
list-style-type: none;
margin-left: 5px;
padding: 0;
width: 200px;
float: left;
}
.items li {
margin: 5px;
padding: 5px;
cursor: pointer;
border-radius: 5px;
font-size: 20px;
}
.o {
background-color: #00ff44;
}
</style>
<script>
$(function () {
$("#sortable1,#sortable3").sortable({
connectWith: "#sortable3",
dropOnEmpty: true
});
$("#sortable2").sortable({
connectWith: "#sortable3",
dropOnEmpty: false
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h4>jQuery UI Sortable connectWith Option</h4>
<ul id="sortable1" class="items">
<li class="list">Drop on empty</li>
<li class="list">Drop on empty</li>
</ul>
<ul id="sortable2" class="items">
<li class="list o">No drop on empty</li>
<li class="list o">No drop on empty</li>
</ul>
<ul id="sortable3" class="items"
style="height:200px;background-color:#a0ff94">
</ul>
</center>
</body>
</html>
Producción:
jQuery UI Ordenable connectWith Opción
Referencia: https://api.jqueryui.com/sortable/#option-connectWith
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA