jQuery UI es una tecnología basada en la web y consta de varios widgets GUI, efectos visuales y temas. Estas funciones se pueden implementar mediante 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 jQuery UI Droppable create Event para activar cuando se crea el droppable.
Sintaxis:
Necesitamos inicializar el widget droppable con la función crear una devolución de llamada
$( ".selector" ).droppable({
create : function( event, ui ) {}
});
Vincule un detector de eventos al evento drop create:
$( ".selector" ).on( "dropcreate ", 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. El objeto ui está vacío pero se incluye para mantener la coherencia con otros eventos.
Enlace CDN: a continuación se muestran algunos scripts de jQuery Mobile que se necesitarán para su proyecto, así que agréguelos a 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 describe los usos de jQuery UI Droppable create Event .
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: 50px;
border: 1px solid black;
background-color: blue;
}
.dropp2 {
width: 200px;
height: 50px;
border: 1px solid black;
float: center;
background-color: green;
}
</style>
<script>
$(function () {
$(".dragg").draggable();
$(".dropp2").droppable({
create: function (event, ui) {
$(".res").html($(".res").html()
+ "<b>Droppable Widget has been created.</b><br>");
}
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery UI Droppable create 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 crear evento
Referencias: https://api.jqueryui.com/droppable/#event-create
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA