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 de contención arrastrable de jQuery UI . La opción de contención se usa para establecer que los elementos arrastrables estarán contenidos en el contenedor especificado.
Sintaxis: la opción de contención toma un elemento como string, jquery, elemento y se inicializa de la siguiente manera:
$(".drag").draggable({
containment: "#gfg_container",
});
-
Obtenga la opción de contención:
var containmentOpt = $(".drag") .draggable( "option", "containment"); -
Establezca la opción de contención:
$(".drag").draggable( "option", "containment", "#gfg_container");
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, los elementos están contenidos dentro del contenedor con el id » gfg_container «.
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 containment 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,
});
</script>
</body>
</html>
Producción:
jQuery UI Opción de contención arrastrable
Referencia: https://api.jqueryui.com/draggable/#option-containment
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA