Arrastrar y Soltar en HTML5 – Drag And Drop – Tutorial y Ejemplo

Arrastrar y Soltar en HTML5 – Drag And Drop – Tutorial y Ejemplo

Arrastrar y Soltar en HTML5 – Drag And Drop – Tutorial y Ejemplo
5 (100%) 1 voto

En este Articulo Arrastrar y Soltar en HTML5 ( drag and drop) veremos que es y como funciona esta caracteristica que viene en HTML5, tambien vamos a construir un ejemplo que nos servira de tutorial para ir practicando lo que vamos viendo. Que es la caracteristica Arrastrar y Soltar en html5 (drag and drop)?, Drag and drop es una caracteristica que nos permite arrastrar practicamente cualquier elemento de una pagina, funciona en base a:

  • Eventos
  • Javascript
  • Marcado de elementos

Esta caracterisitica permite la interactividad con el usuario de una manera mas facil, real y dinamica, asi que comenzemos con esto Arrastrar y Soltar en HTML5…

Requerimientos:

Desarrollo

Para comprender el funcionamiento y puesta en marcha de la caracteristica drag and drop vamos a realizar un ejemplo en el cual tendremos 4 imagenes tipo rompecabezas que seran capaces de arrastrarse y cambiar de posicion entre ellas.

arrastrar y soltar en html5 1
 

arrastrar y soltar en html5 2
 

arrastrar y soltar en html5 3
 

arrastrar y soltar en html5 4

  • Creacion de contenido Arrastrable

Para hacer que un elemento de una pagina sea capaz de arrastrar y soltar en html5 tenemos que agregar el atributo draggable y establecerlo a true, cabe decir que la mayoria de los navegadores tienen la opcion de arrastrar activada por defecto para los elementos de ancla: como

en nuestro ejemplo tendremos 4 divs en los que iran las 4 imagenes que queremos arrastrar asi que lo que arrastraremos seran los divs

  • Eventos

La caracteristica Drag and Drop posee algunos eventos para su manipulacion y control de todo el proceso como son:

  • dragstart

Se dispara cuando comienza el arrastrado del elemento

  • drag

Se dispara cada vez que el mouse es movido y se esta arrastrando un objeto

  • dragenter

Se dispara cuando se esta realizando un arrastrado y se ingresa por primera vez con el mouse a un elemento objetivo

  • dragleave

Se dispara cuando se esta realizando un arrastrado y deja con el mouse a un elemento objetivo

  • dragover

Se dispara cuando se esta realizando un arrastrado y se ingresa con el mouse a un elemento objetivo

  • drop

Se dispara cuando el usuario suelta el boton mientras arrastra un objeto sobre un objeto que puede recibirlo

  • dragend

Se dispara cuando el usuario suelta el boton mientras arrastra un objeto

El estilo CSS de la clase columna es la siguiente:

Aqui cabe decir que el codigo: cursor:move; es para que aparezca sobre el elemento el icono de mover para darle a enternder al usuario que es un objeto arrastrable.

Ahora el codigo javascript donde se agregan los eventos drag and drop en html5 es el siguiente:

Ahora solo queda probar el codigo…

arrastrar y soltar en html5 drag and drop

Puedes ver el ejemplo en accion en el siguiente link:
Lab DragAndDrop

¿Quieres tener tu pagina web? Contrata con DigitalServer o HostGator! ( dominio incluido gratis )
———-

Resultado

Visto – Arrastrar y Soltar en HTML5 – Drag And Drop – Tutorial y Ejemplo

Arrastrar y Soltar en HTML5 – Drag And Drop – Tutorial y Ejemplo
5 (100%) 1 voto

7 Comentarios ¿Qué opinas tú del tema?

  1. Germán 2016-05-31
  2. Ale 2015-08-11
  3. Ale 2015-08-11
  4. Carlos 2015-01-30
  5. Jessk 2014-06-29
  6. VityOsma 2013-10-16
    • Jonathan Melgoza 2013-10-16

Dejar un comentario

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