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:

Notepad ++(vale cualquier otro editor de textos)

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.

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

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;
}

.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);
});

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

7 Comentarios ¿Qué opinas tú del tema?

Germán

Buenos días … Me gustaría saber si haces desarrollos de aplicaciones específicas? si es así como te contacto?

Responder
Ale

Esto debería funciobar en moviles, ejemplo ios? Por que no funciona

Responder
Ale

Esto debería funciobar en mi Inés, ejemplo ios? Por que no funciona

Responder
Carlos

¿Porqué no funciona en IE?
Un saludo.

Responder
Jessk

Hola, una pregunta y si quisiera validar que esten en el orden correcto como podria hacerlo?

Responder
VityOsma

Hola, he utilizado tu código para crear un mapa en el que puedo arrastrar los elemento, en vez de usar div estoy utilizando una tabla en la que cada td tiene un id, la tabla esta creada a partir de una base de datos, en la que me gustaría guardar los elemento arrastrados a cada celda, por lo que necesito obtener la ID de la celda a la que he arrastrado la imagen y el nombre de la imagen que he arrastrado a dicha celda, ¿Sabes como puedo conseguirlo? supongo que podre obtener esta información en la parte de intercambiar la información, ¿Me puedes ayudar? Gracias!

Responder

Jonathan Melgoza

Hola VityOsma, si te entiendo bien (sino corrigeme)
-Para obtener el id del elemento donde se “suelta” el elemento arrastrado seria con la instruccion this.getAttribute(‘id’); dentro de la funcion handleDrop.
-Para obtener el nombre de la imagen puedes establercer el nombre en el atributo alt y luego obtenerlo o obtener el atributo src completo. Al igual que la forma anterior la linea seria dragSrcEl.getAttribute(‘src’); dependiendo si estas moviendo un elemento img, (Recuerda las variables dragSrcEl se utilizaron en el tutorial)
Saludos.