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
0
