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 hoverClass de jQuery UI Droppable . Con esta opción, la clase se agregará al elemento desplegable mientras se pasa el cursor sobre un elemento arrastrable aceptable. El valor por defecto de esta opción es “falso”.
Sintaxis:
La opción hoverClass toma un valor de tipo booleano y la sintaxis es la siguiente:
$( ".selector" ).draggable({ hoverClass: "drop-hover" });
-
Obtenga la opción hoverClass:
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
-
Establezca la opción hoverClass:
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" );
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 hoverClass de jQuery UI Droppable.
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;
width: 20%;
}
</style>
<script>
$(function () {
$("#btn").on('click', function () {
var hoverClass = $(".dropp2")
.droppable( "option", "hoverClass" );
$("#gfg").html("HoverClass Value: "+hoverClass);
});
});
$(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 hoverClass 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="Click">
<h3><span id="gfg"></span></h3>
</center>
</body>
</html>
Producción:
jQuery UI Droppable hoverClass Opción
Referencia: https://api.jqueryui.com/droppable/#option-greedy
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA