jQuery UI Draggable consta de opciones, métodos y eventos. El complemento es una de las opciones de Draggable. Cuando laopción de ajuste es verdadera para cualquier elemento, se adherirá a los otros elementos que se pueden arrastrar. También podemos usar la opción de ajuste a otro elemento determinado, lo que significa que podemos elegir a qué elemento debe adherirse o no. La opción de ajuste admite tipos booleanos y selectores. Podemos entender el funcionamiento de la opción de complemento mirando algunos ejemplos interactivos.
En este artículo, vamos a aprender cómo podemos usar la opción de ajuste arrastrable de jQuery UI .
Sintaxis:
$(".selector").draggable({
snap: true
});
-
Obtener la opción de ajuste :
var snap = $(".selector").draggable( "option", "snap" ); -
Establezca la opción de complemento :
$(".selector").draggable( "option", "snap", true );
Enlace CDN: En primer lugar, tenemos que agregar los scripts jQuery UI que se necesitan para el proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/ui/ 1.12.1/jquery-ui.js”></script>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
Ejemplo 1: en este ejemplo, habrá cuatro cuadros y todos ellos se pueden arrastrar y todos están configurados en la opción snap: true . Cuando acercamos cualquier elemento a otros elementos, se adherirá a ellos con un efecto magnético.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src=
"https://code.jquery.com/ui/1.13.0/jquery-ui.js"
integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k="
crossorigin="anonymous">
</script>
<style>
.box1 {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
}
.box2 {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
margin-top: 50px;
}
.box3 {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
transform: translate(200px, -250px);
}
.box4 {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
margin-top: 50px;
transform: translate(200px, -250px);
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>jQuery UI Draggable snap option</h3>
<div class="draggable_box box1">Drag this box.</div>
<div class="draggable_box box2">Drag this box.</div>
<div class="draggable_box box3">Drag this box.</div>
<div class="draggable_box box4">Drag this box.</div>
<script>
$(".draggable_box").draggable({
snap: true,
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, a diferencia del primero, usaremos la opción de ajustar a un elemento específico, tendremos cuatro cuadros, dos de ellos son rojos y dos azules, el cuadro rojo solo se pegará al cuadro rojo y la caja azul con azul.
HTML
<!doctype html>
<head>
<link rel="stylesheet"
href=
"https://code.jquery.com/ui/1.13.0/themes/dark-hive/jquery-ui.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script src=
"https://code.jquery.com/ui/1.13.0/jquery-ui.js"
integrity=
"sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k="
crossorigin="anonymous">
</script>
<style>
.box1 {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
background-color: red;
}
.box2 {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
margin-top: 50px;
background-color: blue;
}
.box3 {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
transform: translate(200px, -250px);
background-color: red;
}
.box4 {
display: flex;
align-items: center;
justify-content: center;
font-family: roboto;
width: 100px;
height: 100px;
background: #ccc;
border-radius: 10px;
margin-top: 50px;
transform: translate(200px, -250px);
background-color: blue;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>jQuery UI Draggable snap option</h3>
<div class="draggable_box box1 red1">Drag this box.</div>
<div class="draggable_box box2 blue2">Drag this box.</div>
<div class="draggable_box box3 red3">Drag this box.</div>
<div class="draggable_box box4 blue4">Drag this box.</div>
<script>
$(".red1").draggable({
snap: ".box3",
})
$(".blue2").draggable({
snap: ".blue4",
})
</script>
</body>
</html>
Producción:
Enlace de referencia: https://api.jqueryui.com/draggable/#option-snap