jQuery UI es una tecnología basada en la web y consta de widgets GUI, efectos visuales y temas implementados mediante jQuery, JavaScript Library. 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 de tolerancia desplegable de jQuery UI. Esta opción se usa para determinar qué modo usar para probar si un elemento que se puede arrastrar se desplaza sobre un elemento que se puede soltar. El valor predeterminado de esta opción es «intersección».
Los siguientes son los valores posibles:
- “fit”: Especifica que el arrastrable se superpone al soltable por completo.
- “ intersect”: Especifica que el arrastrable se superpone al soltable al menos un 50% en ambas direcciones.
- “puntero”: especifica que el puntero del mouse se superpone al droppable.
- “touch”: Especifica que lo arrastrable se superpone a lo soltable en cualquier cantidad.
Sintaxis:
La opción de tolerancia toma un valor de tipo definido anteriormente y la sintaxis es la siguiente.
$( ".selector" ).draggable({
tolerance: "fit"
});
-
Obtener la opción de tolerancia
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
-
Establecer la opción de tolerancia
$( ".selector" ).droppable( "option", "tolerance", "fit" );
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 de tolerancia desplegable de jQuery UI.
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: 90px;
height: 60px;
border: 1px solid black;
background-color: blue;
font-size: 20px;
}
.dropp2{
width: 250px;
height: 60px;
font-size: 20px;
border: 1px solid black;
float: center;
background-color: green;
}
#btn
{
padding: 0.5;
font-size: 20px;
}
</style>
<script>
$(function () {
$("#btn").on('click', function () {
var tolerance = $(".dropp2")
.droppable( "option", "tolerance" );
$("#gfg").html(tolerance);
});
});
$(function () {
$(".dragg").draggable();
$(".dropp2").droppable({
drop: function (event, ui) {
$(this)
.find("p")
.html("Dropped!");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery UI Droppable tolerance 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="Value of the tolerance option">
<h3><span id="gfg"></span></h3>
</center>
</body>
</html>
Producción:
Opción de tolerancia droppable de jQuery UI
Referencia: https://api.jqueryui.com/droppable/#option-tolerance
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA