jQuery Mobile es un conjunto de herramientas de widgets de interacción con el sistema del usuario basado en HTML5 que se utiliza para diversos fines construidos sobre jQuery. Está diseñado para crear sitios rápidos y con capacidad de respuesta accesibles para dispositivos móviles, pestañas y computadoras de escritorio. El método jQuery UI Droppable enable() se usa para permitir que los elementos que se pueden arrastrar sean aceptados por el elemento que se puede soltar.
Sintaxis :
$('selector').droppable("enable");
Parámetros: este método no acepta ningún parámetro.
Vínculos de CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/ui/1.12.1/themes/smoothness/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:
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://code.jquery.com/ui/1.12.1/themes/smoothness/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>
<style>
h1 {
color: green;
}
div {
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#div2 {
width: 150px;
height: 150px;
background: blue;
}
#div1 {
position: absolute;
left: 250px;
width: 200px;
height: 200px;
background: green;
color: #fff;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>jQuery UI Droppable enable() method</h3>
<div id="div1">Drop here</div>
<div id="div2">Drag me</div>
<br>
<button onclick="enableDroppable()">
Enable Droppable
</button>
<script>
$("#div2").draggable();
$("#div1").droppable({
drop: () => alert("Element Dropped!")
});
// Disable droppable by default
$("#div1").droppable("disable");
// Enab;e droppable on function call
function enableDroppable() {
$("#div1").droppable("enable");
}
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/droppable/#method-enable
Publicación traducida automáticamente
Artículo escrito por bhanusivanagulug y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA