jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante la biblioteca jQuery JavaScript. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. Se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
En este artículo, vamos a aprender la opción snapTolerance arrastrable de jQuery UI . La opción snapTolerance establece la distancia mínima a la que se ajustarán los dos elementos que se pueden arrastrar .
Sintaxis: snapTolerance toma un valor numérico y el valor predeterminado es 20 . La opción se inicializa de la siguiente manera.
$(".drag").draggable({
snapTolerance: 10
});
-
Obtenga la opción snapTolerance:
var snapToleranceOpt = $(".drag") .draggable("option", "snapTolerance"); -
Establezca la opción snapTolerance:
$(".drag").draggable("option", "snapTolerance", 10);
Vínculos de CDN : use los siguientes CDN para el proyecto jQuery UI.
<enlace rel=”hoja de estilo” href=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css” />
<script src=”https://cdnjs .cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1 /jquery-ui.min.js”></script>
Ejemplo : en el siguiente ejemplo, hemos establecido snapTolerance en 10 .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style type="text/css">
.drag {
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid black;
cursor: pointer;
border-radius: 10px;
text-align: center;
background-color: lightgreen;
}
.container {
background-color: darkgreen;
width: 200px;
height: 200px;
margin: auto;
}
</style>
</head>
<body>
<div data-role="page" id="gfgpage">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<div data-role="main" class="ui-content">
<h3>jQuery UI Draggable snapTolerance option</h3>
<div id="gfg_container"
class="container">
<div class="drag"
style="left:20px;top:20px;">
Box 1
</div>
<div class="drag"
style="left:20px;top:30px;
background-color:lightgray">
Box 2
</div>
</div>
</div>
</div>
<script>
$(".drag").draggable({
containment: "#gfg_container",
snap: true,
snapTolerance: 10
});
</script>
</body>
</html>
Producción
jQuery UI Arrastrable snapTolerance Option
Referencia: https://api.jqueryui.com/draggable/#option-snapTolerance
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA