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 dogerenciador de arquivos da plataforma subjacente e soltado s em uma página da Web.
Os principais passos para o drag and drop é definir adrop zone (ou seja definir um elemento para a queda dos arquivos) e definir event handlers para os eventosdrop edragover . Essas etapas são descritas abaixo, incluindo exemplos de trechos de código. O codigo fonte esta disponivel emMDN'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 interfaceDataTransfer e a segunda API é a interfaceDataTransferItem eDataTransferItemList. Este exemplo ilustra o uso de ambas as APIs (e não usa nehuma interface específica do Gecko).
Definindo a dropzone
O elemento de destino do eventodrop precisa de um event handler globalondrop O seguinte trecho de código mostra como isso é feito com um elemento:<div>
<div ondrop="dropHandler(event);"> <p>Drag one or more files to this Drop Zone ...</p></div>Normalmente, um aplicativo inclui um event handlerdragover 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 globalondragover:
<div 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:Nota: Observe que os eventosdragstart edragend não são acionados ao arrastar um arquivo para o navegador do OS.
Processo de drop
O eventodrop é acionado quando o usuário solta o(s) arquivo(s) no drop handler, se o navegador suportar a interfaceDataTransferItemList o metodogetAsFile() será usado para acessar cada arquivo; caso contrário, a interfaceDataTransfer usara a propriedadefiles 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 oFile 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 handlerdragover chamapreventDefault() 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();}