jQuery UI es una tecnología basada en web y consiste en widgets GUI, efectos visuales y temas implementados usando la biblioteca jQuery, 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, usaremos el método jQuery UI Droppable widget() para devolver un objeto jQuery que contiene el elemento Droppable. No acepta ningún parámetro para su funcionamiento.
Sintaxis:
var widget = $( ".selector" ).droppable ( "widget" );
Parámetro: Este método no acepta ningún parámetro.
Tipo de devolución: este método devuelve un valor de objeto que contiene el elemento Droppable.
Enlace CDN: agregue los siguientes scripts de jQuery Mobile que serán necesarios para 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 demuestra el método jQuery UI Droppable widget() .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<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>
.drag
{
width: 90px; height: 50px;
border: 1px solid black;
background-color:blue;
}
.drop2, .drop3 {
width: 200px; height: 50px;
border: 1px solid black;
float : center;
background-color:green;
}
</style>
<script>
$(function() {
$("#btn").on('click', function () {
var widget = $(".drop2").droppable( "widget" );
document.getElementById('spanID').innerHTML +=
"No of jQuery object : " + Object.keys(widget).length;
});
$( ".drag" ).draggable();
$( ".drop2" ).droppable({
drop: function( event, ui )
{
$( this ).find( "p" ).html( "Dropped!" );
}
});
$( ".drop3" ).droppable("disable");
$( ".drop3" ).droppable({
drop: function( event, ui ) {
$( this ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery UI Droppable widget() method</h3>
<div class="drag">
<p>Drag</p>
</div>
<br>
<div class="drop2">
<p>Drop here</p>
</div>
<br>
<div class="drop3">
<p>Disable - Can't Drop Here</p>
</div>
<br>
<input type="button" id="btn" value="Widget">
<h4><span id="spanID"></span></h4>
</center>
</body>
</html>
Producción:
jQuery UI Droppable widget() Método
Referencia: https://api.jqueryui.com/droppable/#method-widget
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA