Arrastrar y soltar con HTML5 y javascript

mgocx · #1 (**permalink**) 09/02/2012, 02:35

Hola como están?!?!, en esta ocasión les traigo un ejemplo básico de arrastrar y soltar (drag and drop) en HTML5 y JavaScript que por el momento solo es compatible con firefox pero que es muy útil.

CÓDIGO HTML NECESARIO:

Código HTML:

<!DOCTYPE html>
 
<html lang="es">
 
<head>
<title>Arrastrar y Soltar - HTML5</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />

<script type="text/javascript">
	function empezar(e) {
		e.dataTransfer.effectAlloweb = 'move';
		e.dataTransfer.setData("Data", e.target.getAttribute('id'));
		e.dataTransfer.setDragImage(e.target, 0, 0);
		return true;
	}
	function enter(e) {
		return true;
	}
	function over(e) {
		var esarrastrable = e.dataTransfer.getData("Data");
		var id = e.target.getAttribute('id');
		
		if (id == 'caja_principal')
			return false;
		if (id == 'caja_objetos' && esarrastrable == 'objeto1')
			return false;
		else
			return true;
	}
	function drop(e) {
		var esarrastrable = e.dataTransfer.getData("Data");
		e.target.appendChild(document.getElementById(esarrastrable));
		e.stopPropagation();
		return false;
	}
	function end(e) {
		e.dataTransfer.clearData("Data");
		return true
	}
</script>

</head>
 
<body>
	<div id="caja_principal" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
		<div id="objeto1" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
		Primer Objeto.
		</div>
		<div id="objeto2" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
		Segundo Objeto.
		</div>
	</div>

	<div id="caja_objetos" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
	
	</div>
</body>
</html>

ARCHIVO style.css:

Código HTML:

#caja_principal, #caja_objetos {
float:left;
width:250px;
height:300px;
padding:10px;
margin:10px;
}
#caja_principal{
background:#CCCCCC;
}
#caja_objetos{
background:#666666;
}
#objeto1, #objeto2{
text-align:center;
width:75px;
height:50px;
padding:10px;
margin:10px;
}
#objeto1{
background:#0099FF;
}

#objeto2{
background:#0066FF;
}

-------------------------------------------------------------------------------------------------------

Paso a explicar cada "pedasito" del código

jejee

Código HTML:

<div id="caja_principal" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
		<div id="objeto1" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
		Primer Objeto.
		</div>
		<div id="objeto2" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)">
		Segundo Objeto.
		</div>
	</div>

En esta etiqueta div podemos visualizar los siguientes aspectos claves:

Código HTML:

<div id="caja_principal" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)"></div>

En ella se destacan las siguientes tres características:

1. draggable="true" ----> es lo que hace que un objeto sea capas de arrastrase.

2. ondragstart="return empezar(event)" ----> ondragstart define el momento cuando la persona intenta arrastrar el objeto.

3. ondragend="return end(event)" ----> define que va a pasar cuando se suelte el objeto.

Código HTML:

<div id="objeto1" draggable="true" ondragstart="return empezar(event)" ondragend="return end(event)"></div>

Este código pertenece al objeto que va a arrastrarse al hacer clic. y tiene las siguientes caracteristicas:

1. draggable="true" ----> es lo que hace que un objeto sea capas de arrastrase.
2. ondragstart="return empezar(event)" ----> ondragstart define el momento cuando la persona intenta arrastrar el objeto.
3. ondragend="return end(event)" ----> define que va a pasar cuando se suelte el objeto.

Una ves que definamos esto debemos configurar los eventos con javascript!

Código HTML:

<script type="text/javascript">
	function empezar(e) {
		e.dataTransfer.effectAlloweb = 'move';
		e.dataTransfer.setData("Data", e.target.getAttribute('id'));
		e.dataTransfer.setDragImage(e.target, 0, 0);
		return true;
	}
	function enter(e) {
		return true;
	}
	function over(e) {
		var esarrastrable = e.dataTransfer.getData("Data");
		var id = e.target.getAttribute('id');
		
		if (id == 'caja_principal')
			return false;
		if (id == 'caja_objetos' && esarrastrable == 'objeto1')
			return false;
		else
			return true;
	}
	function drop(e) {
		var esarrastrable = e.dataTransfer.getData("Data");
		e.target.appendChild(document.getElementById(esarrastrable));
		e.stopPropagation();
		return false;
	}
	function end(e) {
		e.dataTransfer.clearData("Data");
		return true
	}
</script>

Explicación breve de como funciona cada función:

Al definir la función "empezar" le decimos al navegador como debe usar correctamente el div cuando arrastremos.

Al definir la función "enter" queremos definir que los objetos arrastrables puedan situarse en los div contenedor.

Al definir la función "over" esta función recupera el objeto arrastrable y la div contenedora y verifica si puede alojarla o no.

Al definir la función "drop" recupera los datos del objeto arrastrado y utiliza la función pre-construida appendChild() para verificar y agregar el contenido, También se define si debe o no continuar el evento.

Al definir la función "end" usamos esta función para limpiar los datos del objeto arrastrado y darle la opción de seguir con otros.

Bueno con esto terminamos puedes tocar todo el código para ir probando y buscándole la utilidad

Muchas gracias a todos y espero que les sirva Saludos!