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.

Lo siguiente sera agregar los elementos draggables y droppables.

  • Draggables: Elementos que se pueden arrastrar
  • Droppable: Elementos donde se pueden soltar los draggables

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.

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’)

 


Agregar un comentario