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 snapMode arrastrable de jQuery UI . La opción snapMode establece que dos elementos arrastrables se ajustarán al límite interior o al límite exterior o a ambos.
Sintaxis: la opción snapMode toma un valor de string y debe ser uno de internal/outer/both . Inicialice la sintaxis de la siguiente manera:
$(".drag").draggable({
snapMode: "outer",
});
-
Obtener la opción snapMode
var snapModeOpt = $(".drag") .draggable("option", "snapMode"); -
Establezca la opción SnapMode
$(".drag").draggable("option", "snapMode", "inner");
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: hemos creado tres botones para cambiar el modo de ajuste entre el interior/exterior/ambos en el siguiente ejemplo.
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 snapMode option</h3>
<p id="modeValue">Mode: </p>
<button onclick="changeMode('inner')">inner</button>
<button onclick="changeMode('outer')">outer</button>
<button onclick="changeMode('both')">both</button>
<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,
snapMode: "inner",
});
$("#modeValue").text("Mode: inner");
function changeMode(mode){
$(".drag").draggable("option", "snapMode", mode);
$("#modeValue").text("Mode: "+mode);
}
</script>
</body>
</html>
Producción:
jQuery UI Opción snapMode arrastrable
Referencia: https://api.jqueryui.com/draggable/#option-snapMode
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA