jQuery UI es una tecnología basada en web y consta de varios widgets GUI, efectos visuales y temas. Estas características se pueden implementar utilizando 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 evento jQuery UI Droppable over para activar cuando un elemento arrastrable aceptado se arrastre sobre el elemento desplegable.
Sintaxis:
Necesitamos inicializar el widget Droppable con la función de devolución de llamada
$( ".selector" ).droppable({
over: function( event, ui ) {}
});
-
Vincule un detector de eventos al evento desplegable.
$( ".selector" ).on( "dropover ", function( event, ui ) {} );
Parámetros: Estos son los siguientes parámetros que se aceptan.
- evento: este evento se activa cuando un elemento arrastrable aceptado se arrastra sobre el elemento desplegable.
- ui: este parámetro es de tipo objeto con las siguientes opciones.
- ayudante: este parámetro es el objeto jQuery que representa al ayudante que se está arrastrando.
- desplazamiento: este parámetro es la posición absoluta actual del objeto auxiliar arrastrable que se representa como {arriba, izquierda}.
- position: este parámetro es la posición actual del objeto auxiliar arrastrable que se representa como {arriba, izquierda}.
- arrastrable: este parámetro es el objeto jQuery que representa el elemento arrastrable.
Enlace CDN: agregue a continuación los scripts de jQuery Mobile que serán necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src= “https://code.jquery. com/jquery-1.12.4.js”></script>
<script src= “https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo: Este ejemplo demuestra el evento jQuery UI Droppable over.
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>
.dragg {
width: 90px;
height: 60px;
font-size: 20px;
border: 1px solid black;
background-color: blue;
}
.dropp2 {
width: 250px;
height: 60px;
font-size: 20px;
border: 1px solid black;
float: center;
background-color: green;
}
</style>
<script>
$(function () {
$(".dropp2").droppable({
drop: function (event, ui) {
$(this)
.find("p")
.html("Dropped!");
}
});
$(".dragg").draggable();
$(".dropp2").droppable({
over: function (event, ui) {
$(".res").html(
"<b>Droppable over Event Triggered.</b><br>"
);
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery UI Droppable Over Event</h3>
<div class="dragg">
<p>Drag</p>
</div>
<br>
<div class="dropp2">
<p>Drop here</p>
</div>
<br>
<div class="res"></div>
</center>
</body>
</html>
Producción:
jQuery UI Droppable sobre evento
Referencia: https://api.jqueryui.com/droppable/#event-over
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA