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