Arrastar e soltar arquivos

As interfaces HTML Drag and Drop permitem que os aplicativos da Web arrastem e soltem arquivos em uma página da Web. Este documento descreve como um aplicativo pode aceitar um ou mais arquivos que são arrastados do gerenciador de arquivos da plataforma subjacente e soltado s em uma página da Web.

Os principais passos para o drag and drop é definir a drop zone (ou seja definir um elemento para a queda dos arquivos) e definir event handlers para os eventos drop e dragover . Essas etapas são descritas abaixo, incluindo exemplos de trechos de código. O codigo fonte esta disponivel em MDN's drag-and-drop repository (pull requests e/ou issues são bem-vindas).

Nota: Nota: HTML drag and dropDefine duas APIs diferentes para suportar arrastar e soltar arquivos. Uma API é a interface DataTransfer e a segunda API é a interface DataTransferItem e DataTransferItemList. Este exemplo ilustra o uso de ambas as APIs (e não usa nehuma interface específica do Gecko).

Definindo a drop zone

O elemento de destino do evento drop precisa de um event handler global ondrop O seguinte trecho de código mostra como isso é feito com um elemento: <div>

html
<div id="drop_zone" ondrop="dropHandler(event);">
  <p>Drag one or more files to this Drop Zone ...</p>
</div>

Normalmente, um aplicativo inclui um event handler dragover no elemento de destino do drop e esse manipulador desativará o comportamento de arraste padrão do navegador. Para adicionar esse handler, você precisa incluir um event handler global ondragover:

html
<div
  id="drop_zone"
  ondrop="dropHandler(event);"
  ondragover="dragOverHandler(event);">
  <p>Drag one or more files to this Drop Zone ...</p>
</div>

Por fim, um aplicativo pode querer estilizar o elemento da drop zone para indicar visualmente que o elemento é uma drop zone. Neste exemplo, o elemento da drop zone usa o seguinte estilo:

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

Nota: Nota: Observe que os eventos dragstart e dragend não são acionados ao arrastar um arquivo para o navegador do OS.

Processo de drop

O evento drop é acionado quando o usuário solta o(s) arquivo(s) no drop handler, se o navegador suportar a interface DataTransferItemList o metodo getAsFile() será usado para acessar cada arquivo; caso contrário, a interface DataTransfer usara a propriedade files para acessar cada arquivo.

Este exemplo mostra como escrever o nome de cada arquivo arrastado, no console. Em um aplicativo real, um aplicativo pode querer processar um arquivo usando o File API.

Observe que neste exemplo, Qualquer item de arrasto que não seja um arquivo é ignorado.

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

  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // Use a interface DataTransferItemList para acessar o (s) arquivo (s)
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
      // Se os itens soltos não forem arquivos, rejeite-os
      if (ev.dataTransfer.items[i].kind === "file") {
        var file = ev.dataTransfer.items[i].getAsFile();
        console.log("... file[" + i + "].name = " + file.name);
      }
    }
  } else {
    // Use a interface DataTransfer para acessar o (s) arquivo (s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      console.log(
        "... file[" + i + "].name = " + ev.dataTransfer.files[i].name,
      );
    }
  }
}

Impedir o evento de arrastar padrão do navegador

O seguinte event handler dragover chama preventDefault() para desativar o manipulador padrão de arrastar e soltar do navegador.

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

  // Impedir o comportamento padrão (impedir que o arquivo seja aberto)
  ev.preventDefault();
}

Veja também