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 (en-US)dragover (en-US) . 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: 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 (en-US)DataTransferItemList (en-US). 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 (en-US) precisa de um event handler global  ondrop (en-US) O seguinte trecho de código mostra como isso é feito com um elemento: <div>

<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 (en-US) 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 (en-US):

<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:

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

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 (en-US) é acionado quando o usuário solta o(s) arquivo(s)  no drop handler, se o navegador suportar a interface DataTransferItemList (en-US) o metodo getAsFile() (en-US) será usado para acessar cada arquivo; caso contrário, a interface DataTransfer usara a propriedade files (en-US) 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.

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 (en-US) chama preventDefault() para desativar o manipulador padrão de arrastar e soltar do navegador.

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