From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../arrastar_e_soltar_arquivos/index.html | 91 -------- files/pt-br/dragdrop/drag_and_drop/index.html | 258 --------------------- 2 files changed, 349 deletions(-) delete mode 100644 files/pt-br/dragdrop/drag_and_drop/arrastar_e_soltar_arquivos/index.html delete mode 100644 files/pt-br/dragdrop/drag_and_drop/index.html (limited to 'files/pt-br/dragdrop/drag_and_drop') diff --git a/files/pt-br/dragdrop/drag_and_drop/arrastar_e_soltar_arquivos/index.html b/files/pt-br/dragdrop/drag_and_drop/arrastar_e_soltar_arquivos/index.html deleted file mode 100644 index 13609ee260..0000000000 --- a/files/pt-br/dragdrop/drag_and_drop/arrastar_e_soltar_arquivos/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Arrastar e soltar arquivos -slug: DragDrop/Drag_and_Drop/Arrastar_e_soltar_arquivos -translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

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 {{event("drop")}} e {{event("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: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}}Define duas APIs diferentes para suportar arrastar e soltar arquivos. Uma API é a interface {{domxref("DataTransfer")}} e a segunda API é a interface {{domxref("DataTransferItem")}} e {{domxref("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 {{event("drop")}} precisa de um event handler global  {{domxref("GlobalEventHandlers.ondrop","ondrop")}} O seguinte trecho de código mostra como isso é feito com um elemento: {{HTMLelement("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 {{event("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 {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:

- -
<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 {{event("drop")}} é acionado quando o usuário solta o(s) arquivo(s)  no drop handler, se o navegador suportar a interface {{domxref("DataTransferItemList")}} o metodo {{domxref("DataTransferItem.getAsFile","getAsFile()")}} será usado para acessar cada arquivo; caso contrário, a interface {{domxref("DataTransfer")}} usara a propriedade {{domxref("DataTransfer.files","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 {{domxref("File","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 {{event("dragover")}} chama {{domxref("Event.preventDefault","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

- - diff --git a/files/pt-br/dragdrop/drag_and_drop/index.html b/files/pt-br/dragdrop/drag_and_drop/index.html deleted file mode 100644 index 10e5592b91..0000000000 --- a/files/pt-br/dragdrop/drag_and_drop/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Arrastar e soltar -slug: DragDrop/Drag_and_Drop -tags: - - Avançado - - Guia(2) - - HTML5 - - Visão Geral - - XUL - - arrastar e soltar - - eventos -translation_of: Web/API/HTML_Drag_and_Drop_API ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

As interfaces de Drag and Drop (arrastar e soltar) habilitam aplicações a usar funcionalidades de arrastar e soltar através do navegador. Por exemplo, com essas funcionalidades, o usuário pode selecionar elementos arrastáveis (draggable) com o mouse, arrastar elementos até um elemento soltável (droppable), e soltar o elemento ao soltar o botão do mouse. Uma representação translúcida de elementos arrastáveis (draggable) seguem o ponteiro do mouse durante a operação de arrastar (drag).

- -

Para web sites, extensões e aplicações XUL, você pode customizar os tipos de elementos que podem se tornar arrastáveis (draggable) e o tipo de retorno que o elemento arrastável produz, assim como os elementos soltáveis (droppable).

- -

NT: Para manter a tradução mais precisa e coesa, a partir daqui iremos manter os termos drag e drop e seus variantes conforme texto original. Sendo portanto mantidos também os termos draggable e droppable.

- -

Este documento é uma visão geral do drag and drop no HTML. Ele inclui uma descrição de suas interfaces, funcionalidades básicas de como permitir a adesão de funcionalidades arrastar e soltar em uma aplicação e um sumário da interoperabilidade entre interfaces.

- -

Eventos Drag

- -

O drag and drop em HTML usa o {{domxref("Event","modelo de eventos DOM")}} e os {{domxref("DragEvent","eventos drag")}} são hereditários dos {{domxref("MouseEvent","eventos do mouse")}}. Uma operação típica de drag começa quando o usuário seleciona um elemento arrastável com o mouse, move o mouse até um elemento soltável (droppable) e solta o mouse. Durante as operações, diversos tipos de evento são acionados e alguns podem até ser acionados multiplas vezes (como por exemplo os tipos de evento {{event("drag")}} e {{event("dragover")}}.

- -

Todos os tipos de evento drag são associados a um manipulador global de eventos. Cada tipo de evento drag e cada atributo drag global tem um documento de referência que o descreve. A tabela a seguir descreve brevemente os tipos de evento e um link de referência para seu documento.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventOn Event HandlerDescription
{{event('drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}Acionado quando um elemento ou seleção de texto está sendo arrastado.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}}Acionado quando uma operação de arrastar está terminando (por eexmplo, ao soltar o botão do mouse ou pressionar a tecla esc). (Veja Terminando um evento Drag.)
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}Acionado quando um elemento arrastável ou seleção de texto entra em um ponto de soltura (drop target). (Veja Determinando Drop Targets.)
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}Acionado quando um elemento não é mais o ponto de seleção imediata da operação drag.
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}Acionado quando um elemento arrastável ou seleção de texto abandona um ponto de soltura (drop target) válido.
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}}Acionado quando um elemento ou seleção de texto está sendo arrastado sobre um ponto de soltura válido (a cada aproximadamente 100 milisegundos).
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}Acionado quando o usuário começa a arrastar um elemento válido ou seleção de texto. (Veja Começando uma Operação Drag.)
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}}Acionado quando um elemento ou seleção de texto é solta em um ponto d soltura (drop target) válido. (Veja Realizando um Drop.)
- -

Note que eventos dragstart e dragend não são acionados ao arrastar um arquivo vindo do sistema operacional para o navegador.

- -

Interfaces

- -

A interface HTML drag and drop é composta pelos eventos {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}.

- -

A interface {{domxref("DragEvent")}} consiste de um construtor e uma propriedade, a propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que é um objeto {{domxref("DataTransfer")}}. Os objetos {{domxref("DataTransfer")}} incluem estados do evento drag como o tipo de drag sendo feito (por exemplo copy ou move), os dados do do evento drag (um ou mais itens) e o tipo de cada item drag (um MIME type). Objetos {{domxref("DataTransfer")}} também contém métodos para adicionar itens aos dados do drag e remover um item. As interfaces {{domxref("DragEvent")}} e {{domxref("DataTransfer")}} devem as únicas necessárias para adicionar capacidades de drag and drop para uma aplicação. Entretanto, note que o Firefox provê suporte para apenas algumas {{anch("Gecko specific interfaces","Gecko-specific extensions")}} ao objeto {{domxref("DataTransfer")}}, apesar de entretanto essas extensões funcionarem apenas no Firefox.

- -

Cada objeto {{domxref("DataTransfer")}} contém uma propriedade {{domxref("DataTransfer.items","items")}} que é uma {{domxref("DataTransferItemList","lista")}} dos objetos {{domxref("DataTransferItem")}}. Cada objeto {{domxref("DataTransferItem")}} representa um único drag item e cada item tem uma propriedade {{domxref("DataTransferItem.kind","kind (tipo)")}} que é o tipo(kind) de data (seja ela string ou file) e uma propriedade {{domxref("DataTransferItem.type","type (tipo)")}} que é o tipo de dado do item (ou seja, MIME type). O objeto {{domxref("DataTransferItem")}} também contém métodos para conseguir dados do item arrastável.

- -

O objeto {{domxref("DataTransferItemList")}} é uma lista de objetos {{domxref("DataTransferItem")}}. A lista de objetos contém métodos para: adicionar um item para uma lista, remover um item de uma lista e limpar a lista com todos os itens.

- -

A diferença chave entre das interfaces {{domxref("DataTransfer")}} e {{domxref("DataTransferItem")}} é que a primeira usa o método síncrono {{domxref("DataTransfer.getData","getData()")}} para acessar os dados de um item arrastável, e a segunda usa o método assíncrono {{domxref("DataTransferItem.getAsString","getAsString()")}} para acessá-lo.

- -

Note: as interfaces {{domxref("DragEvent")}} e a {{domxref("DataTransfer")}} são vastamente interoperáveis com navegadores desktop. Entretanto, as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}} tem suporte limitado entre navegadores. Veja {{anch("Interoperabildade")}} para mais informações.

- -

Interfaces específicas para o Gecko

- -

A Mozilla e o Firefox suportam algumas funcionalidades fora dos padrões do modelo drag and drop. Elas são cfunções convenientes para facilitar o arraste múltiplo de elementos e a manipulação de dados que não são strings (como arquivos). Para mais informações, veja Dragging and Dropping Multiple Items. Para mais informações, veja a página de referência {{domxref("DataTransfer")}} para todas as propriedades específicas para o Gecko e Métodos específicos para o Gecko.

- -

O básico

- -

Esta seção dispõe de um resumo das etapas básicas para adicionar a funcionalidade drag and drop à uma aplicação. Cada seção inclui uma descrição da etapa, um breve exemplo em código, e links para informações adicionais.

- -

Identificando o que é arrastável (draggable)

- -

Para fazer um elemento se tornar arrastável, é necessária a adição de um atributo {{htmlattrxref("draggable")}} além da adição do manipulador de eventos global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}, conforme descrito no exemplo a seguir

- -
function dragstart_handler(ev) {
- console.log("dragStart");
- // Adiciona o id do elemento em questão ao objeto de transferência de dados (dataTransfer)
- ev.dataTransfer.setData("text/plain", ev.target.id);
-}
-
-<body>
- <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p>
-</body>
-
- -

Veja a referência do atributo draggable e o Guia de operações drag para mais informações.

- -

Defina os dados do drag

- -

A aplicação é livre para incluir qualquer quantidade de dados do item em uma operação drag. Cada dado de um item é uma {{domxref("DOMString","string")}} de um tipo particular, tipicamente um MIME type como por exemplo text/html.

- -

Cada {{domxref("DragEvent","evento drag")}} tem uma propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que segura os dados do evento. Essa propridade (que é um objeto {{domxref("DataTransfer")}}) também tem um método para gerenciar os dados do arraste (drag). O método {{domxref("DataTransfer.setData","setData()")}} é usado para adicionar um item aos dados do arraste, como demonstrado no exemplo a seguir.

- -
function dragstart_handler(ev) {
-  // Adiciona os dados do arraste (drag)
-  ev.dataTransfer.setData("text/plain", ev.target.id);
-  ev.dataTransfer.setData("text/html", "<p>Parágrafo de exemplo</p>");
-  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
-}
-
- -

Para uma lista de tipos de dados mais comuns utilizados pelo drag and drop (como texto, HTML, links, e files), veja Tipos recomendados de Drag Types e para mais informações sobre os dados do arraste (drag data), veja Drag Data.

- -

Defina uma imagem de arraste (drag image)

- -

Por padrão, o navegador provê uma imagem que aparece por trás do ponteiro do mouse durante uma operação de arraste. Entretanto, uma aplicação pode definir uma imagem customizada utilizando o método {{domxref("DataTransfer.setDragImage","setDragImage()")}} como demonstrado no exemplo a seguir.

- -
function dragstart_handler(ev) {
-  // Cria uma imagem e então a utiliza como a "drag image".
-  // NOTA: mude "example.gif" como uma imagem existente, caso contrário
-  // ela não será criada e a imagem padrão será utilizada como padrão.
-  var img = new Image();
-  img.src = 'example.gif';
-  ev.dataTransfer.setDragImage(img, 10, 10);
-}
-
- -

Para aprender mais sobre arrastar imagens de retorno, veja Definindo a imagem de retorno do arraste (Drag).

- -

Defina o efeito do arraste (Drag effect)

- -

A propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} é usada para controlar o retorno (geralmente visual) que é dado ao usuário durante uma operação drag and drop. Ela afeta qual cursor o navegador irá mostrar enquanto o arraste é realizado. Por exemplo, quando o usuário passa sobre (famoso hover) o ponto de soltura (drop target), o cursor do navegador pode indicar o tipo de operação que irá acontecer.

- -

Três efeitos podem ser definidos: 

- -

copy indica que os dados sendo arrastados podem ser copiados da localização atual para a localização de destino (localização do drop). 

- -

move indica que os dados sendo arrastados irá ser movido.

- -

link indica que alguma forma de relação ou conexão será criada entre a localização de origem (source) e de destino (drop). 

- -

Durante a operação de arraste, os efeitos do arraste (drag) podem ser modificados para determinar que certos efeitos são permitidos em determinadas localizações. Se permitido, uma soltura (drop) pode ocorrer naquela localização.

- -

O exemplo a seguir mostra como utilizar essa propriedade.

- -
function dragstart_handler(ev) {
-  // Determina o efeito de arraste para copy
-  ev.dataTransfer.dropEffect = "copy";
-}
-
- -

Veja Efeitos do Arraste (Drag Effects) para mais detalhes.

- -

Defina uma zona de soltura (drop zone)

- -

Por padrão, o navegador previne tudo que possa acontecer ao soltar alguma coisa em um elemento HTML. Para mudar esse comportamento de forma que um elemento se torne uma zona de soltura (drop zone) ou que seja soltável (droppable), o elemento precisa ter ambos os atributos  {{domxref("GlobalEventHandlers.ondragover","ondragover")}} e {{domxref("GlobalEventHandlers.ondrop","ondrop")}}. O exemplo a seguir mostra como utilizar esses atributos e inclui manipuladores básicos de evento para cada um.

- -
function dragover_handler(ev) {
- ev.preventDefault();
- // Define o dropEffect para ser do tipo move
- ev.dataTransfer.dropEffect = "move"
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
-}
-<body>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div>
-</body>
-
- -

Note que cada manipulador chama {{domxref("Event.preventDefault","preventDefault()")}} para previnir o processamento adicional de eventos (como eventos touch ou eventos pointer).

- -

Para mais informações, veja Especificando pontos de soltura (Drop Targets).

- -

Manipulando o efeito de soltura (drop)

- -

O manipulador do evento {{event("drop")}} é livre para processar os dados do arraste (drag) de maneira específica em uma aplicação. Tipicamente, uma aplicação usaria o método {{domxref("DataTransfer.getData","getData()")}} para reter os itens arrastados e processá-los de acordo. A semântica da aplicação pode ser diferente dependendo do valor do {{domxref("DataTransfer.dropEffect","dropEffect")}} e/ou o estado da chave que o modifica.

- -

O exemplo a seguir mostra o manipulador de soltura (drop handler) pegando o id do elemento de origem atráves dos dados de drag (drag data) e então usando o id para mover o elemento de sua origem para o elemento de soltura (drop element).

- -
function dragstart_handler(ev) {
- // Adiciona o id do elemento alvo para o objeto de transferência de dados
- ev.dataTransfer.setData("text/plain", ev.target.id);
- ev.dropEffect = "move";
-}
-function dragover_handler(ev) {
- ev.preventDefault();
- // Define o dropEffect para ser do tipo move
- ev.dataTransfer.dropEffect = "move"
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // Pega o id do alvo e adiciona o elemento que foi movido para o DOM do alvo
- var data = ev.dataTransfer.getData("text");
- ev.target.appendChild(document.getElementById(data));
-}
-<body>
- <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">Este elemento é arrastável.</p>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Zona de Soltura (Drop Zone)</div>
-</body>
-
- -

Para mais informações, veja Realizando uma soltura (Drop).

- -

Fim da soltura (Drag end)

- -

No início da operação de arraste (drag), o evento {{event("dragend")}} é acionado no elemento de origem (source) - o elemento que foi o alvo do início do arraste (drag start). Este evento é acionado sempre quando o arraste é completado ou cancelado. O manipulador de eventos {{event("dragend")}} pode verificar o valor da propriedade {{domxref("DataTransfer.dropEffect","dropEffect")}} para determinar se a operação de arraste foi bem sucedida ou não.

- -

Para mais informações sobre manipular o final de uma operação de arraste, veja Finalizando um arraste (Drag).

- -

Interoperabilidade

- -

Como podem ser visto no DataTransferItem interface's Browser Compatibility table, drag-and-drop a interoperabilidade é relativamente ampla emtre ps brpwsers desktop (exceto as interfaces {{domxref("DataTransferItem")}} e {{domxref("DataTransferItemList")}}  que tem o menor suport). Estes dados tambem indica que o suporte ao drag and drop entre browser mobile é muito menor.

- -

Exemplos e demonstrações

- - - -

Veja também

- - -- cgit v1.2.3-54-g00ecf