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.
|
1
2
|
<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
|
1
2
3
4
5
|
<!– 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.
|
1
2
3
4
5
6
7
8
|
$(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’)
