Drag & Drop archivo

Traducción en curso

Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una página web. En este documento se describe cómo 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 configurar Drag-and-drop son: 1) definir una "zona drop (drop zone), es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos dropdragover. Estos pasos se describen a contnuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el repositorio drag-and-drop de MDN (cualquier sugerencia o  tema que revisar es bienvenido).

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 la zona "drop" [drop zone]

Es necesario configurar un evento drop en el objeto sobre el cual se soltará el objeto arrastrado. Este evento llamará una función global ondrop que recibe los datos del objeto arrastrado. El siguiente código muestra cómo 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.

Procesa la acción de soltar [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)
}

Prevenir el comportamiento default de arrastrado en el browser 

El siguiente evento dragover llama a  preventDefault() para deshabilitar (turn off) la respuesta estandar drag-and-drop del browser.

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

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

Limpieza (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: mdnwebdocs-bot, israteneda, RVidalki, clarii, rgomez
Última actualización por: mdnwebdocs-bot,