jQuery UI es una tecnología basada en la web y consta de widgets de GUI, efectos visuales y temas implementados mediante jQuery ,Biblioteca de JavaScript . jQuery UI es la mejor herramienta para crear interfaces de interfaz de usuario para las páginas web. También se puede usar para crear aplicaciones web altamente interactivas o se puede usar para agregar widgets fácilmente.
En este artículo, aprenderemos a usar la opción jQuery UI Draggable iframeFix . Esta opción se usa para evitar que los iframes capturen los eventos de movimiento del mouse durante un arrastre. El valor predeterminado de esta opción es falso.
Los siguientes son los múltiples tipos admitidos:
- Booleano: cuando se establece en verdadero, se colocarán superposiciones transparentes sobre todos los iframes de la página.
- Selector: cualquier iframe que coincida con el selector se cubrirá con superposiciones transparentes.
Sintaxis:
La opción iframeFix toma un valor de tipo Boolean o Selector y la sintaxis es la siguiente:
$( ".selector" ).draggable({ iframeFix: true });
-
Obtenga la opción iframeFix:
var iframeFix= $( ".selector" ).draggable( "option", "iframeFix" );
-
Establezca la opción iframeFix:
$( ".selector" ).draggable( "option", "iframeFix", true);
Enlace CDN: Se necesitarán los siguientes scripts de jQuery Mobile para su proyecto, por lo que debemos agregar estos scripts a su proyecto.
<enlace href = «https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css» rel = «hoja de estilo»>
<script src = «https://code. jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
Ejemplo: Este ejemplo describe los usos de la opción jQuery UI Draggable iframeFix.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<style>
.dragg {
width: 100px;
height: 50px;
border: 1px solid black;
background-color: blue;
}
.dropp2{
width: 250px;
height: 50px;
border: 1px solid black;
float: center;
background-color: green;
}
#btn
{
padding: 0.5;
font-size: 20px;
height: 40px;
width: 40%;
}
</style>
<script>
$(function () {
$("#btn").on('click', function () {
var iframeFix = $(".dragg")
.draggable( "option", "iframeFix" );
document.getElementById('gfg').innerHTML
+= "iframeFix Value : " + iframeFix;
});
});
$(function () {
$(".dragg").draggable();
$(".dragg").draggable({
iframeFix: true
});
$(".dropp2").droppable({
drop: function (event, ui) {
$(this)
.find("p")
.html("Dropped!");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery UI Draggable iframeFix Option</h3>
<div class="dragg">
<p>Drag</p>
</div>
<br>
<div class="dropp2">
<p>Drop here</p>
</div>
<br>
<input type="button" id="btn"
value="Get iframeFix">
<h3><span id="gfg"></span></h3>
</center>
</body>
</html>
Producción:
jQuery UI Arrastrable iframeFix Opción
Referencia: https://api.jqueryui.com/draggable/#option-iframeFix
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA