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
 


Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

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

Deja tu comentario

7 Comentarios ¿Qué opinas tú del tema?

  1. Germán
  2. Ale
  3. Ale
  4. Carlos
  5. Jessk
  6. VityOsma

Dejar un comentario

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

Loading Facebook Comments ...