Drag & Drop archivo

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Las interfaces Drag and Drop posibilitan arrastrar y soltar archivos en una página web. Este documento describe como una aplicación puede aceptar uno o más archivos que son arrastrados desde el explorador de archivos de la plataforma y soltados en una página web.

Los pasos principales para drag and drop son definir unadrop zone (es decir, un elemento objetivo en el que soltar el archivo) y definir funciones de gestión de eventos para los eventos dropdragover. Estos pasos son descritos abajo incluyendo snippets de código. El código fuente completo está disponible en el repositorio drag-and-drop de MDN (pull requests y/o issues son bienvenidos).

Nota: HTML drag and drop define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz DataTransfer y la segunda API son las interfaces DataTransferItem y DataTransferItemList.  Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).

Define the drop zone

El elemento objetivo del evento drop nevesita una función de gestion de eventos global ondrop. El siguiente código muestra como se hace con un elemento <div>:

<div id="drop_zone" ondrop="dropHandler(event);">
  <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
</div>

Normalmente, una aplicación incluirá una función de gestión de eventos dragover en el elemento objetivo del arrastre y esa función desactivará el comportamiento de arrastre por defecto del browser. Para añadir esta función, necesita incluir una función global ondragover:

<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
  <p>Arrastra y suelta uno o más archivos a esta zona ...</p> 
</div>

Por último, puede que una aplicación quiera personalizar el estilo del elemento objetivo del arrastre para indicar visualmente que es una zona drag and drop. En este ejemplo, el elemento objetivo usa el siguiente estilo:

#drop_zone {
  border: 5px solid blue;
  width:  200px;
  height: 100px;
}

Fíjese que los eventos dragstart y ragend no son activados cuando se arrastra un archivo al browser desde el SO.

Process the drop

The drop event is fired when the user drops the file(s). In the following drop handler, if the browser supports DataTransferItemList interface, the getAsFile() method is used to access each file; otherwise the DataTransfer interface's files property is used to access each file.

This example shows how to write the name of each dragged file to the console. In a real application, an application may want to process a file using  the File API.

Note that in this example, any drag item that is not a file is ignored.

function dropHandler(ev) {
  console.log('File(s) dropped');

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
      // If dropped items aren't files, reject them
      if (ev.dataTransfer.items[i].kind === 'file') {
        var file = ev.dataTransfer.items[i].getAsFile();
        console.log('... file[' + i + '].name = ' + file.name);
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
    }
  } 
  
  // Pass event to removeDragData for cleanup
  removeDragData(ev)
}

Prevent the browser's default drag behavior

The following dragover event handler calls preventDefault() to turn off the browser's default drag and drop handler.

function dragOverHandler(ev) {
  console.log('File(s) in drop zone'); 

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}

Cleanup

Typically, an application may want to perform some cleanup by deleting the file drag data. In this example, the drop event is passed along from drop handler to a custom function called removeDragData. If the browser supports the DataTransferItemList interface, the list's clear() method is used to delete the file drag data; otherwise the DataTransfer object's clearData() method is used to delete the data.

function removeDragData(ev) {
  console.log('Removing drag data')

  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to remove the drag data
    ev.dataTransfer.items.clear();
  } else {
    // Use DataTransfer interface to remove the drag data
    ev.dataTransfer.clearData();
  }
}

See also

Etiquetas y colaboradores del documento

Colaboradores en esta página: rgomez
Última actualización por: rgomez,