Elementos droppables en jQuery
Una vez vistos los elementos draggables en jQuery, vamos a estudiar los otros elementos que actúan sobre ellos, los llamados droppables (en castellano, contenedores). Estos objetos tienen la propiedad de poder contener elementos draggables (arrastrables) creados en la misma web. Para dar esta característica a un elemento aplicamos esta sintaxis:
$("#divObjetivo").droppable({options})
Al igual que ocurría en los objetos draggables, al dar la propiedad droppable a nuestro div podemos especificar las siguientes opciones:
- Accept:selectorCSS = solamente aceptara elementos droppables del tipo “selectorCSS”
- HoverClass:nombreClase = al pasar un objeto “draggable” sobre nuestro objeto, este cambiara su clase a “nombreClase”.
- Drop:function(ev,iu) = función callback que se inicia cuando un objeto ha sido arrastrado a nuestro contenedor. Esta opción la explicamos de forma detallada en el siguiente párrafo.
Como hemos visto, una de la opciones que tenemos al crear un objeto contenedor (draggable) en jQuery es asignar una función “callback”, esta será llamada de forma asíncrona cuando un elemento arrastrable se sitúe dentro de nuestro contenedor. Nuestra función callback debe tener estar forma:
("#div").droppable({drop:function(ev,iu){}})
Si nos fijamos la función toma dos parámetros, ev e iu:
- ev: el evento asociado a la acción.
- ui: un objeto con varios atributos, entre ellos ui.draggable que corresponde al objeto arrastrado.
Aparte de estos dos parámetros, dentro de la función asociada al evento drop, podemos hacer referencia al propio elemento droppable (contenedor) mediante el uso de la propiedad $(this). En el siguiente código tendríamos un objeto contenedor (droppable) que solo aceptaría elementos arrastrables (draggables) de la clase “.bloque”. Además cuando un objeto arrastrable se situará sobre él, este pasaría a tener la clase “bloqueDropHover” y en el momento que soltaramos el objeto en el contedor, añadiriamos el texto “Arrastrado!” a nuestro contenedor y mostraríamos un alert con el identificador del objeto arrastrable, “libro1” en este caso.
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(".bloque").draggable({helper: 'clone'});
$(".bloqueDrop").droppable({
accept: ".bloque",
hoverClass: 'bloqueDropHover',
drop: function(evento, ui) {
$(this).append("Arrastrado!");
alert("objeto con id="+ui.draggable.attr("id"));
}});});
</script>
<style>
.bloque {
border: 2px solid #0090DF;
background-color: #68BFEF;
width: 75px;
height: 75px;
margin: 10px;
}
.bloqueDrop {
background-color: #FFBFEF;
border: 3px double #c17d11;
width: 300px;
height:100px;
margin: 10px;
}
.bloqueDropHover {
border: 3px double #000000;
}
</style>
</head>
<body>
<div class="bloque" id="libro1"></div>
<div style="height:300px"> </div>
<div class="bloqueDrop"></div>
</body>
</html>
