Fuente: desarrolloweb
Enlace: http://www.desarrolloweb.com/articulos/drag-drop-html.html
Lectura de archivos en HTML (File API)
Arrastrar y soltar imágenes (drag & drop)
Para gestionar, arrastrar y soltar un elemento sobre una determinada área –que podría ser toda la ventana, aunque nosotros lo acotaremos al área <div> creada para ello-, hemos de capturar los tres posibles eventos:
- ondragenter: se ejecuta cuando el elemento arrastrado entra en el área seleccionada.
- ondragover: se ejecuta constantemente mientras el elemento arrastrado esté sobre el área seleccionada.
- ondrop: se ejecuta cuando el elemento arrastrado es soltado dentro del área seleccionada.
A nosotros no nos interesa que acontezca nada en los dos primeros casos, por lo cual creamos una función de respuesta -ignoreDrag- que parará la propagación del evento y evitará que se ejecute cualquier tipo de respuesta por defecto.En el caso de ser soltado, la función llamada -drop-, realiza esencialmente lo que sigue:
- Frena la propagación del evento, como antes dijimos.
- Detiene cualquier otra acción por defecto.
- Llama a la función de procesamiento de archivos, como si se hubiera cargado el archivo desde una caja de diálogo.
Listado 4: Activación de las funciones de arrastrar y soltar (drag & drop).var dropBox;
window.onload = function() {
dropBox = document.getElementById(“fileOutput”);
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}
function ignoreDrag(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var data = e.dataTransfer;
var files = data.files;
processFiles(files);
}
Teóricamente, debería actuar, sin más, como una especie de conector en nuestro código anterior; desafortunadamente, el soporte dado para ello dista algo de ser el esperado, siendo muy crítico sobre todo trabajando sin conexión –permisos de acceso-.
En el Listado 5 se recoge un ejemplo sencillo, aplicado a una lectura de archivos de imágenes, sin comprobaciones de compatibilidad ni adornos de ninguna clase, pero plenamente funcional.
Listado 5: Ejemplo de lectura de un archivo de imagen, con soporte de arrastrar y soltar (drag & drop).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ lang=”es-es”>
<title>Leer archivo de imagen, con capacidades drag & drop</title>
<style>
div {
margin-top: 30px;
border: solid 1px black;
padding: 5px;
width: 300px;
height: 300px;
background: lightyellow;
background-size: 100%;
background-repeat: no-repeat;
text-align: center;
}
</style>
<script>
function processFiles(files) {
var file = files[0];
var reader = new FileReader();
reader.onload = function (e) {
// Cuando éste evento se dispara, los datos están ya disponibles.
// Se trata de copiarlos a una área <div> en la página.
var output = document.getElementById(“fileOutput”);
fileOutput.style.backgroundImage = “url(‘” + e.target.result + “‘)”;
};
reader.readAsDataURL(file);
}
// —————————————
var dropBox;
window.onload = function() {
dropBox = document.getElementById(“fileOutput”);
dropBox.ondragenter = ignoreDrag;
dropBox.ondragover = ignoreDrag;
dropBox.ondrop = drop;
}
function ignoreDrag(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var data = e.dataTransfer;
var files = data.files;
processFiles(files);
}
// —————————————-
</script>
</head>
<body>
<input id=”fileInput” type=”file” size=”50″ onchange=”processFiles(this.files)”>
<div id=”fileOutput”></div>
</body>
</html>
