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


draggable=true

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:


.columna{
	width:200px;
	height:200px;
	float:left;
	border: 2px solid #FFFFFF;
	-webkit-border-radius: 10px;
         -ms-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
	cursor:move;
}
.columna.over {
  border: 2px solid #FF0000;
}

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:


var dragSrcEl = null;
var cols = document.querySelectorAll('#panel .columna');

//guardamos el contenido que queremos cambiar para la transferencia al dejar de arrastrar
function handleDragStart(e) {
  dragSrcEl = this;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }

  e.dataTransfer.dropEffect = 'move';  //efecto al mover

  return false;
}

function handleDragEnter(e) {
  this.classList.add('over');//agregamos borde rojo en el estilo css
}

function handleDragLeave(e) {
  this.classList.remove('over'); //eliminamos borde rojo en el estilo css
}

function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation(); //evitamos abrir contenido en otra pagina al soltar
  }
	//hacemos el intercambio de contenido html de el elemento origne y destino 
	if (dragSrcEl != this) {
		dragSrcEl.innerHTML = this.innerHTML;
		this.innerHTML = e.dataTransfer.getData('text/html');
		this.classList.remove('over');
	}

  return false;
}

function handleDragEnd(e) {
  [].forEach.call(cols, function (col) {
    col.classList.remove('over');//eliminamos el borde rojo de todas las columnas
  });
}

//agregamos todos los eventos anteriores a cada columna mediante un ciclo
[].forEach.call(cols, function(col) {
   col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false);
  col.addEventListener('dragover', handleDragOver, false);
  col.addEventListener('dragleave', handleDragLeave, false);
  col.addEventListener('drop', handleDrop, false);
  col.addEventListener('dragend', handleDragEnd, false);
});

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]