Arrastrar y Soltar en HTML5 - Drag And Drop

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
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...
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 )
----------
Post completo en: http://jonathanmelgoza.com/blog/arrastrar-y-soltar-en-html5-drag-anddrop/#ixzz3CNR3zxB4