Vamos a mostrar un ejemplo de cómo mover imágenes por una página web y atraparla en un div, para ello vamos a usar JQuery UI. Utilizaremos draggable y droppable. Se van a usar los estilos mínimos, este tutorial no tiene como objetivo tener un entorno bonito donde probarlo, si no que se vea el funcionamiento de las funciones comentadas. El código no tiene mayor complicación.
En el ejemplo vamos a tener un par de imágenes y un div con un borde, el objetivo es mover cada imagen al div y que éste la atrape, vamos a ver los códigos empezando por el HTML.
Código HTML
Podrás apreciar que el código del HTML es breve, justo lo necesario, aquí no se encuentra la parte importante del tutorial.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="estilos.css">
<title>Drag</title>
</head>
<body>
<img class="moverImagen" src="solvetic.png" alt="">
<img class="moverImagen" src="solvetic.png" alt="">
<div id="cuadro"></div>
</body>
</html>En la sección head importamos el estilo necesario, el script que creamos y los script de JQuery UI. En el body simplemente se añaden 2 imágenes y un div, el div cuenta con un id, y las imágenes con una clase, así podremos manejarlos en nuestro script.
Código CSS
Como hemos dicho al principio los estilos no son una prioridad, solo se pondrán los necesarios para esta tarea.
#cuadro{
width:270px;
min-height: 60px;
margin: auto;
border:1px solid black;
padding: 5px;
}
.dropped {
position: static !important;
}
Se añade al div un borde y se centra, así podremos ver cuando capture la imagen. A la clase dropped se la hace estática, esta parte es la más importante, ya que esta clase será añadida a la imagen cuando sea atrapada por el div.
Código JQuery
Vamos a poner el código a continuación, para después explicarlo.
$(document).ready(function(){
$(".moverImagen").draggable();
$("#cuadro").droppable({
drop: function (event, ui) {
ui.draggable.addClass("dropped");
$(this).append(ui.draggable);
}
});
})Hacemos a la clase moverImagen draggable, que es la clase agregada a nuestras imágenes en el HTML. Esta tarea ya permite a mover o arrastras nuestras imágenes por la página, pero solo eso, con ese código aún no se “capturaría”. Para ello usaremos droppable en el div con id cuadro, dentro de droppable hacemos que la imagen situada en el div se la agregue la clase dropped (recuerda el CSS, sin la posición estática no funcionaría bien) y posteriormente ésta se agrega como contenido del div, para ello usamos append.
Ahora vamos a probar el ejemplo, en la siguiente imagen vemos cómo inicia la página:
Al mover una imagen tendrá el siguiente aspecto:
Y por último cuando tengamos en el div las 2 imágenes, la “página” lucirá así:
Hay que comentar que depende del tamaño de la ventana la apariencia variara ligeramente. Hasta aquí ha llegado el tutorial, ahora puedes practicar y complicar el ejemplo todo lo que quieras.