JQuery UI nos permite implementar de forma muy sencilla la funcionalidad de arrastrar y soltar un elemento (definido como draggable) dentro de otro que realiza la función de contenedor (definido como droppable).
De entre sus propiedades destacamos accept, mediante la cual configuraremos qué elementos draggable serán admitidos tras ser soltados sobre él, indicando su atributo 'id' o nombre de clase CSS.
Otra propiedad interesante es tolerance, que permite indicar si los elementos draggable serán admitidos cuando estén parcial o complementamente dentro del elemento droppable. Los valores que puede tomar son:
- fit: el elemento a mover debe ser soltado estando completamente dentro del contenedor.
- intersect: el elemento a mover debe ser soltado cuando al menos el 50% de su área (tanto a lo ancho como a lo alto) esté dentro del contenedor.
- pointer: el elemento será admitido en el contenedor cuando el botón del ratón sea levantado dentro de él.
- touch: el elemento a mover será admitido aunque tan sólo una pequeña parte de él se encuentre dentro del contenedor.
En el siguiente ejemplo creamos dos elementos que podrán ser arrastrados hacia un contenedor, el cual admitirá sólo a uno en concreto de ellos cuando sea soltado estando completamente dentro de su área:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | Arrastrar y soltar con JQuery UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
#divDestino { height:200px;width:400px;background-color:cyan;z-index:0; }
#arrastrar1 { position:absolute;top:270px;left:30px; }
#arrastrar2 { position:absolute;top:270px;left:200px; }
</style>
<!-- Observa que agregamos también la librería JQuery UI -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>
<!-- Agregamos también el archivo CSS del theme que usemos -->
<link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />
<script type="text/javascript">
$(document).ready(function()
{
// Dar a las imágenes la capacidad de mover las imágenes
$("#arrastrar1").draggable();
$("#arrastrar2").draggable();
// Damos la capacidad al div de recibir a otros elementos, admitiendo sólo a la imagen
// cuyo 'id' es 'arrastrar2', y con la condición de que sea soltada estando completamente dentro
$("#divDestino").droppable( {accept:"#arrastrar2", tolerance:"fit", drop:elementoSoltado });
});
// ------------------------------
// Al haber definido la propiedad 'accept' para que admita sólo la imagen del logo, no
// se producirá efecto alguno si soltamos la otra imagen al no ser admitida.
function elementoSoltado( event, ui )
{
var id = ui.draggable.attr("id");
$("#log").text("La imagen con id [" + id + "] ha sido soltada y aceptada");
}
</script>
</head>
<body>
<div id="log"> </div>
<div id="divDestino">Mueve las imágenes y suéltalas aquí (sólo se admite el logo).</div>
<img src="icono.ico" id="arrastrar1" alt="" />
<img src="logo.jpg" id="arrastrar2" alt="" />
</body>
</html>
Vea también: [ Droppable ] - [ Droppable (doc) ] - [ droppable() ]
