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 alcance desplegable de jQuery UI. La opción de ámbito se utiliza para agrupar los conjuntos de elementos que se pueden arrastrar y soltar. Un elemento que se puede arrastrar y soltar debe tener el mismo valor de alcance.
Sintaxis : el elemento de opción de alcance toma un valor de string y se inicializa de la siguiente manera:
$("#dropFirst").droppable({
scope: "first",
});
-
Obtener la opción de alcance:
var scopeOpt = $("#dropFirst").droppable("option", "scope"); -
Establezca la opción de alcance:
$("#dropFirst").droppable("option", "scope", "first");
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, tenemos dos elementos que se pueden arrastrar y dos que se pueden soltar . El alcance se establece en primero y segundo respectivamente.
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">
.square_draggable {
width: 50px;
height: 50px;
border: 1px solid black;
margin: 5px;
text-align: center;
line-height: 50px;
background-color: lightblue;
cursor: pointer;
border-radius: 10px;
}
.square_droppable {
width: 100px;
height: 100px;
border: 1px dotted gray;
margin: 5px;
text-align: center;
line-height: 100px;
background-color: lightgray;
}
.container {
background-color: darkgreen;
width: 500px;
height:300px;
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 Droppable scope option</h3>
<div id="gfg_container"
class="container">
<div id="dragFirst"
class="square_draggable">
Item 1</div>
<div style="float:left">
<div id="dragSecond"
class="square_draggable">
Item 2</div>
</div>
<div style="float:left;margin-left:50px;">
<div id="dropFirst"
class="square_droppable">
Scope : first</div>
</div>
<div style="float:left;margin-left:50px;">
<div id="dropSecond"
class="square_droppable">
Scope : second</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$("#dragFirst").draggable({
scope: "first",
containment: "#gfg_container"
});
$("#dragSecond").draggable({
scope: "second",
containment: "#gfg_container"
});
$("#dropFirst").droppable({
scope: "first",
drop: function(event, ui) {
$(this).css("background-color", "lightgreen")
},
over: function(event, ui) {
$(this).css("background-color", "green")
},
out: function(event, ui) {
$(this).css("background-color", "lightgray")
}
});
$("#dropSecond").droppable({
scope: "second",
drop: function(event, ui) {
$(this).css("background-color", "lightgreen")
},
over: function(event, ui) {
$(this).css("background-color", "green")
},
out: function(event, ui) {
$(this).css("background-color", "lightgray")
}
});
});
</script>
</body>
</html>
Producción
Opción de alcance desplegable de jQuery UI
Referencia: https://api.jqueryui.com/droppable/#option-scope
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA