Vamos a ver cómo con muy poquito javascript podemos hacer drag&drop de ficheros sobre nuestra aplicación web. Gracias a esta funcionalidad podemos conseguir, por ejemplo, un efecto similar a los que hace gmail con el arrastre de ficheros para adjuntarlos.

Lo primero será hacernos el esqueleto html de nuestra página, que tendrá un div grande sobre el que dejar caer los ficheros. Para ayudarnos un poco, haremos uso de jquery, aunque no es necesario para lograr este efecto.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>test dd</title>
		<script language="JavaScript"
			src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script>
			[...]
		</script>
	</head>
	<body>
		<div id="droparea" style="height: 300px; border: 1px solid black">
			<h1>Drop your files here!</h1>
		</div>
	</body>
</html>

Bien, ahora pasaremos al javascript. En él tendremos que hacer dos cosas:

  • Dar de alta los listeners de cuando se está haciendo drag & drop
  • Asociar estos listeners a los objetos que nos interesen
//Acciones a realizar cuando se está pasando el fichero por encima. En nuestro caso cambiaremos el color de fondo de la caja
function entering(evt) {
	$('#droparea').css('background-color', '#FF6666')

	evt.stopPropagation();
	evt.preventDefault();
}

//Acciones a realizar cuando salimos del área. En nuestro caso restauraremos la caja a su color original
function leaving(evt) {
	$('#droparea').css('background-color', '')
	evt.stopPropagation();
	evt.preventDefault();
}

//Acciones a realizar cuando soltamos los ficheros dentro del área.
function dropping(evt) {
	var files = evt.dataTransfer.files; // FileList object.
	for (i = 0; i < files.length; i++) {
		file = files[i]
		alert(file.name);
		console.log(file);
	}
	evt.stopPropagation();
	evt.preventDefault();
}

//Asociamos los listeners al objeto dropbox
$(document).ready(function() {
	var droparea = document.getElementById('droparea');

	droparea.addEventListener('dragover', entering, false);
	droparea.addEventListener('drop', dropping, false);
	droparea.addEventListener('dragleave', leaving, false);
})

Y lo dejamos aquí por hoy. No me voy a explicar mucho más porque estoy haciendo un pequeño proyecto que hace uso de estas funcionalidades, y en cuanto esté terminado publicaré aquí la noticia, así como su código fuente.

Más información:

Anuncios