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

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

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
 


¿Sabías que?

¿Necesitas hosting wordpress? WebEmpresa te ofrece un servicio super rápido, excelente soporte en español y certificado SSL gratuito:

WebEmpresa

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

Clic para valorar esta información
[Total: 0 Promedio: 0]

7 Comentarios

    Deja un comentario

    Tu comentario será aprobado por un administrador en unos minutos, por favor no publiques de nuevo tu comentario.