Ejemplo de Drag and Drop con Jquery y Jquery UI


El Drag and Drop o arrastrar y soltar es una caracteristica nueva de HTML5 que tiene diferentes aplicaciones y se usa para darle una mejor experiencia al usuario.

Hoy les voy a mostrar como hacer un drag and drop sencillo, con las librerias jquery y jquery ui.

En el ejemplo vamos a crear dos (pueden ser mas) divs que vas a ser arrastrables con ID diferente cada uno y los vamos a colocar en otro div, al momento de soltarlo el div “droppable” nos va a dar el ID del elemento que soltemos.

Una vez descargados los paquetes empezamos.

Codigo

Ahora vamos a empezar a codificar, lo voy explicando en secciones.

Lo primero que haremos, seria crear una base HTML, despues incluir las librerias jqeury y jquery ui en el head del documento.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>

Lo siguiente sera agregar los elementos draggables y droppables.

  • Draggables: Elementos que se pueden arrastrar
  • Droppable: Elementos donde se pueden soltar los draggables
<!-- Definir los elementos draggables -->
<div id="draggable1" style="width:100px;height: 100px; background: red" class="draggable"></div>
<div id="draggable2" style="width:100px;height: 100px; background: blue" class="draggable"></div>
<!-- Definir los elementos droppables -->
<div id="droppable" class="droppable" style="width:400px; height:400px; border: 3px #f0f0f0 dashed;"></div>

Les agrego un codigo CSS para diferenciarlos. Todos los Ids siempre deben ser diferentes.

El siguiente codigo debe ir en las etiquetas <script></script> de codigo javascript.

$(document).ready(function(){
	$(".draggable").draggable();
	$(".droppable").droppable({
		drop: function(e, ui){
			alert(ui.draggable.attr('id'));
		}
	});
});

En la linea 2 de el codigo anterior, usamos la funcion draggable en todos los elementos que tengan la clase draggable y despues en la linea 3 usamos la funcion droppable para los que tengan la clase droppable.

En la linea 3 – 7, definimos los elementos droppables y en el evento “drop” hacemos un alert mostrando el id del elemento draggable que soltamos sobre el elemento droppable.

  • Para obtener el ID de un elemento draggable: ui.draggable.attr(‘id’)
  • para obtener el ID de un elemento droppable: $(this).attr(‘id’)

Resultado

A continuacion una imagen del resultado.

Descargar

A continuacion la opcion para descargar el codigo y las librerias incluidas.

Finalizando

Espero este ejemplo les guste, a pesar de ser un ejemplo muy sencillo sirve para demostrar el funcionamiento del drag and drop.

No se olviden de seguir la pagina en facebook y en youtube.

Saludos

Leave a comment