jQuery: Drag and Drop

evelb_adriana
Desarrolladora Web
“Todo va a estar bien al final. Si no está bien, no es el final.”
Post más relevante: CSS3: Menú Desplegable con hover

Como en el anterior tutorial vimos una pequeña parte de cómo funcionaba Javascript, esta semana vamos a tratar jQuery que realiza las funciones del anteriormente mencionado y algunas más. La única diferencia con Javascript es que jQuery es una librería que tenemos que aplicar en nuestra aplicación/web. A partir de ahí, y siguiendo unas reglas semejantes a Javascript, podremos trabajar con él.

Insertando la librería jQuery

En nuestro ejemplo de hoy vamos a tratar con otra librería a mayores del jQuery, se trata del jQuery UI que aporta unas funcionalidades que jQuery por sí solo no tiene. Por lo tanto en la cabecera de nuestro código HTML habrá que añadir ambas librerías.
Para introducirlas se emplea la etiqueta script.
Vamos a hacer un ejemplo de borrado, ocultación y clonado con personajes de los Simpson.
Este será nuestro HTML con todas las imágenes ya incluidas.

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title> DRAG AND DROP</title>
	<link rel='stylesheet' type='text/css' href='codigo.css'/>
	<script language='javascript' src="jquery.min.js"></script>
	<script language='javascript' src="jquery-ui.min.js"></script>
	<script language='javascript' src='codigo.js'></script>
</head>
<body class='panel'>
	<div class='simpsons'>
		<div class='personajes'>
			<div class='foto'><img class="foto" src="imaxes/simpsons/homer.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/marge.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/bart.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/lisa.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/burns.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/edna.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/milhouse.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/krusty.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/apu.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/nelson.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/ralph.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/smithers.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/willy.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/skinner.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/abraham.png"/></div>
			<div class='foto'><img class="foto" src="imaxes/simpsons/wiggum.png"/></div>
		</div>  
	</div>  	
	<div class='funcions'> 
		<div class='funcion_i'><img class="funcion_i" src="imaxes/ocultar.png"/></div>
		<div class='funcion_i'><img class="funcion_i" src="imaxes/amosar.png"/></div>
		<div class='funcion_i'><img class="funcion_i" src="imaxes/clonar.png"/></div>
		<div class='funcion_i'><img class="funcion_i" src="imaxes/eliminar.png"/></div>
	</div>
</body>
</html>

Fijaos en que en la cabecera ya se han incluido ambas librerías.
NOTA: Las librerías se pueden descargar desde la propia página de jQuery o incluirlas directamente mediante CDN, es decir, con la URL ya de Internet. En este caso sería así:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

CSS

Como podéis observar la hoja de estilos está enlazada desde un archivo externo pero lo que contendría sería así:

.panel {  
	width: auto;
	height: auto;
	left: auto; 
	top: 10px;
	margin: auto; 
	background: white;
}
.simpsons {
	float: left;
	height: 80%;
	width: 100%;
	background-color: white;
}
.funcions { 
	float: right; 
 	width: 100%; 
	background-color: grey; 
	height: 20%;
	float: left; 
}
.personajes {
	width: 80%;
	float: none;
	margin: 0 auto;
	margin-top: 5%;
}
div { 
	float: left;
}
img.foto {
	margin: 10px 10px;
	width: auto;
	height: 200px;
}
div.funcion_i{ 
	float: right;
}
img.funcion_i { 
	margin: 30px 30px;
	width: 96px;
	height: 96px;
}

NOTA: El tamaño de las imágenes es orientativo, podéis darle vosotros el tamaño que queráis.

estructura

jQuery

Una vez definida la estructura y estilos de nuestro documento procedamos a crear el archivo jQuery que como pudisteis observar está enlazado con el nombre de “codigo.js”, el cual incluye las funciones para nuestra página.
Empezaremos por crear el área de trabajo de jQuery.
Para que funcione todo el código que nosotros queramos debemos escribirlo dentro de:

$( document ).ready(function() {

});

Esto lo que hace es preparar todo el documento para las posibles funciones que nosotros le vayamos a aplicar.
Para realizar cualquier función es necesario empezar dicha orden con “$“, ya que le indica que estamos usando jQuery.
Lo siguiente que haremos será aplicar la posibilidad de arrastrar las imágenes para así poder moverlas por toda la página. Esta propiedad se llama “DRAG“.

NOTA: Para seleccionar los elementos se coge la clase o el id como en Javascript.

$( document ).ready(function() {
	$('div.foto').draggable({ revert: true });
});

Con ésto ya podemos mover la imagen por toda la página y el “revert” hace que en el momento en que la soltemos la devuelva a su sitio.
Ahora lo que tenemos que hacer es darle un lugar en el que poder soltarla. Esta propiedad se llama “DROP“.
Vamos a hacer que se oculte si la arrastramos al botón rojo, por lo que primero habrá que crear la función de ocultar.

$( document ).ready(function() {
	$('div.foto').draggable({ revert: true });	
        var valor;
	$('img[src*=ocultar]').droppable( {
	    drop: function ( event, ui ) {
	      valor = ui.draggable;
	      valor.hide();
	    }
	  } );
});

Primero creamos la variable que va a almacenar el elemento que estemos moviendo. Luego, hacemos que la imagen de ocultar sea droppable, es decir que pueda recoger imágenes(o cualquier otro elemento siempre que sea draggable); en la propiedad drop creamos la función para ocultar que consiste en recoger el elemento que es draggable y almacenarlo en la variable valor. Una vez almacenado lo ocultamos con la propiedad “hide“.

Si ahora está oculto, ¿cómo hacemos para mostrarlo? Haremos que pulsando el botón verde se muestre la imagen oculta.

$( document ).ready(function() {
        $('div.foto').draggable({ revert: true });
	var valor;
	$('img[src*=ocultar]').droppable( {
	    drop: function ( event, ui ) {
	      valor = ui.draggable;
	      valor.hide();
	    }
	 } );

         $('div .funcion_i[src*=amosar]').click(function(){
            valor.css({"left" : "0px", "top" : "0px"}).show();
         } );
});

Como tenemos almacenado en la variable el elemento que ocultamos, lo más sencillo es que cuando hagamos click en el botón verde ese se muestre y para eso se usa la propiedad “show“. A mayores le aplicamos unas reglas css para que no coja otras posiciones en “top” y “left“.

Ya tenemos las funciones de ocultar y mostrar hechas, a la vez que podemos arrastrar y soltar elementos.
Ahora vamos a trabajar con el clonado.

$( document ).ready(function() {
        $('div.foto').draggable({ revert: true });
	var valor;
	$('img[src*=ocultar]').droppable( {
	    drop: function ( event, ui ) {
	      valor = ui.draggable;
	      valor.hide();
	    }
	 } );

         $('div .funcion_i[src*=amosar]').click(function(){
            valor.css({"left" : "0px", "top" : "0px"}).show();
         } );

         $('img[src*=clonar]').droppable( {
            drop: function (event, ui ) {
               var clon = ui.draggable;
               clon.clone().insertAfter('div.foto:last').css({"left" :                "0px", "top" : "0px"}).draggable({ revert: true });
            }
         } );
});

Para clonar, lo primero es hacer que la imagen de clon sea droppable para poder arrastrar ahí la imagen que queramos clonar. Luego recogemos el elemento que arrastramos ahí y con la función clone que nos aporta jQuery lo insertamos al final de todas las imágenes (insertAfter) y le aplicamos las mismas reglas css, a la vez que las hacemos draggables para poder moverlas. ¿Por qué las hacemos draggables? Porque cuando le aplicamos esa propiedad a las imágenes al principio del archivo jQuery, estas aún no existían con lo cual no la reciben y tenemos que aplicársela al momento de crearlas.

clonar

Y para finalizar cómo eliminamos las imágenes. Pues más de lo mismo haremos droppable la imagen de eliminar y seleccionaremos el elemento que soltamos ahí.

$( document ).ready(function() {

 $('div.foto').draggable({ revert: true });
	var valor;
	$('img[src*=ocultar]').droppable( {
	    drop: function ( event, ui ) {
	      valor = ui.draggable;
	      valor.hide();
	    }
	 } );

         $('div .funcion_i[src*=amosar]').click(function(){
            valor.css({"left" : "0px", "top" : "0px"}).show();
         } );

         $('img[src*=clonar]').droppable( {
            drop: function (event, ui ) {
              var clon = ui.draggable;
              clon.clone().insertAfter('div.foto:last').css({"left" : "0px", "top" : "0px"}).draggable({ revert: true });
           }
         } );

         $('img[src*=eliminar]').droppable( {
           drop: function (event, ui ) {
             var borrar = ui.draggable;
             borrar.remove();
           }
         } );
});

La propiedad remove elimina el elemento con lo cual, por mucho que pulsemos el botón de mostrar no va aparecer nunca, a no ser que se recargue la página.

esconder_eliminar
Y así quedaría el código completo de nuestras funciones en jQuery.

Si lo habéis estado probando os habréis dado cuenta que si ocultáis más de una imagen y luego las queréis mostrar solo os devuelve la última.
Como solución a eso y que muestre todas, es guardar todas las imágenes en variables, pero no hace falta crear infinitas variables para guardarlas, las almacenaremos en un array que luego recorreremos para cogerlas todas y mostrarlas.
Este sería el código de este método más complejo.

$( document ).ready(function() {

 $('div.foto').draggable({ revert: true });
	var valor;
  var oculto = new Array();
	$('img[src*=ocultar]').droppable( {
	    drop: function ( event, ui ) {
	      valor = ui.draggable;
	      valor.hide();
              oculto.push(valor);
	    }
	 } );

         $('div .funcion_i[src*=amosar]').click(function(){
            for (i = 0; i < oculto.length; i++) {
               oculto[i].css({"left" : "0px", "top" : "0px"}).show();
            }
         } );

         $('img[src*=clonar]').droppable( {
            drop: function (event, ui ) {
              var clon = ui.draggable;
              clon.clone().insertAfter('div.foto:last').css({"left" : "0px", "top" : "0px"}).draggable({ revert: true });
           }
         } );

         $('img[src*=eliminar]').droppable( {
           drop: function (event, ui ) {
             var borrar = ui.draggable;
             borrar.remove();
           }
         } );
});

Como habéis podido ver, de esta manera tan sencilla podremos mover imágenes por toda la pantalla y que al soltarlas en un determinado lugar realicen una función diferente.
Espero que os haya servido de ayuda y nos vemos en el próximo tutorial.

Os dejo los archivos para que podais probarlo.
Archivos

3 comentarios en “jQuery: Drag and Drop

  1. Hola , estoy estudiando como funciona Drag and Drop, al intentar seguir tu ejemplo, no se como usas las imágenes y donde las encajas en el código. Pense que era un sprite…pero no lo parece viendo el código.

    1. Hola. Perdona la tardanza en contestar.
      Las imágenes están dentro de los divs en el código html. No hay necesidad de hacer sprite puesto que de hacerlas draggables ya se encarga el jQuery UI.
      He dejado un archivo comprimido en el post con las imágenes y códigos necesarios para poder probar el ejemplo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*