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.
El evento de desactivación de jQuery UI Droppable se usa para desenstringr cuando un arrastrable aceptado deja de arrastrar.
Sintaxis:
Necesitamos inicializar el widget Droppable con la función de desactivar una devolución de llamada:
$( ".selector" ).droppable({
deactivate: function( event, ui ) {}
});
-
Vincule un detector de eventos al dropdeactivate an event:
$( ".selector" ).on( "dropdeactivate ", function( event, ui ) {} );
Parámetros: Estos son los siguientes parámetros que se aceptan.
- evento: este evento se activa cuando la ordenación crea un elemento.
- ui: este parámetro es de tipo objeto con las siguientes opciones.
- ayudante: este parámetro es el objeto jQuery que representa al ayudante ordenado.
- arrastrable: este parámetro es el objeto jQuery que representa el elemento arrastrable.
- desplazamiento: este parámetro es la posición absoluta actual del objeto auxiliar que se representa como {arriba, izquierda}.
- posición: este parámetro es la posición actual del objeto auxiliar que se representa como {arriba, izquierda}.
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 del evento de desactivación 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: 120px;
height: 60px;
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 () {
$(".dropp2").droppable({
deactivate : function (event, ui) {
$("#gfg").html ($("#gfg").html ()
+ "<b>Droppable Widget has "
+ "been deactivated.</b><br>");
}
});
});
});
$(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 deactivate Event</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:
Evento de desactivación desplegable de jQuery UI
Referencia: https://api.jqueryui.com/droppable/#event-deactivate
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA