Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Arrastar e soltar

O navegador Firefox e outros produtos da Mozilla suportam várias funções que utilizam o "arrastar e soltar". Este método permite ao usuário segurar o botão do mouse sobre um elemento, arrastá-lo para outro lugar e soltá-lo neste lugar escolhido. Uma representação translúcida do que está sendo arrastado segue o ponteiro do mouse durante toda a operação. O local para onde o arquivo será movido pode estar localizado dentro de outro aplicativo. Muitos sites, extensões e aplicativos XUL podem fazer o uso desta funcionalidade para diferenciar os elementos que podem ser arrastados, a resposta para o uso e também para especificar onde os elementos devem ser colocados.

Este documento explica a funcionalidade de arrastar e soltar no Firefox 3.5 (Gecko 1.9.1) e mais novos. Para a API antiga, que cobre o Firefox 3.0 e anteriores, veja a older API documentation.

Conceitos básicos sobre o "arrastar e soltar"

Quando começa o processo de arrastar, várias informações devem ser consideradas:

  • os dados que serão arrastados, os quais podem ser de diferentes formatos. Por exemplo, uma parte de um texto. Para informações sobre isso, veja Drag Data.
  • a imagem que aparece por trás do cursor do mouse durante o movimento. Esta imagem pode ser customizada, porém, na maioria das vezes, você não especificará isto, e uma imagem padrão será gerada baseando-se no elemento que está sendo arrastado. Para saber mais sobre isto, veja Setting the Drag Feedback Image.
  • as ações permitidas. Três tipos de ações são possíveis: copy serve para indicar que os dados serão copiados da posição atual para uma nova, move, para mover os dados de sua localização atual para a nova e link, indicando que será criada alguma forma de relação ou conexão entre os locais de origem e destino. Durante a operação, as ações podem ser modificadas de acordo com os locais. Se possível, o item poderá ser colocado naquele local. Veja Drag Effects para mais detalhes.

O Firefox e outros produtos da Mozilla suportam várias características não presentes no modelo tradicional de arrastar e soltar. Essas permitem que você mova múltiplos itens e dados não-textuais. Para mais informações, veja Dragging and Dropping Multiple Items.

Para uma lista de tipos comuns de dados utilizados em processos de arrastar e soltar, veja Recommended Drag Types.

Estão disponíveis, também, explicações básicas sobre como mover os seguintes tipos de dados:

Veja DataTransfer para uma explicação sobre o objeto DataTransfer.

Eventos

Vários tipos de eventos são desencadeados durante diversos estágios da operação de arrastar e soltar. Perceba que apenas eventos de arrastar são ativados; Eventos como mousemove não são utilizados.

A propriedade dataTransfer contém os dados de todos os eventos relacionados com a operação de arrastar e soltar.

dragstart
Iniciado em um elemento quando o processo de arrastar começa. O usuário quer mover o elemento onde o dragstart inicia. Durante este evento, um listener pega informções como os dados arrastados e a imagem a ser associada com a ação. Para informações sobre isso, leia Starting a Drag Operation.
dragenter
Iniciado quando o mouse é movido pela primeira vez sobre um elemento enquanto um objeto está sendo arrastado. Um listener para este evento deverá indicador se é permitido soltar o objeto naquele local. Se não há listeners, ou se este não executam alguma operação, então, soltar um objeto dentro deste local não é permitido por padrão. Este também é o evento a ser considerado se quiser dar algum tipo de retorno informando quando é ou não permitido soltar um objeto no local em questão. Para informações, leia Specifying Drop Targets.
dragover
Este evento é disparado quando o mouse é movido sobre um elemento quando um objeto está sendo arrastado. Na maioria das vezes, este evento terá o mesmo efeito do dragenter. Para saber mais, consulte Specifying Drop Targets.
dragleave
O evento é iniciado quando o mouse sai de um elemento quando há um objeto sendo arrastado. Qualquer tipo de retorno provido anteriormente no dragover ou dragenter deverá ser removido.
drag
Este é disparado na origem da operação, ou seja, o elemento onde o dragstart foi iniciado.
drop
O evento drop se inicia no local onde o objeto é movido, ou seja, ao fim da operação, um listener deve ser responsável por armazenar os dados movidos e inserí-los em seu destino. Este evento só será iniciado se o usuário não tiver cancelado a operação anteriormente, seja pressionando a tecla Escape ou soltando o botão do mouse fora de um local válido. Para mais, veja Performing a Drop.
dragend
O local de origem do objeto receberá um evento dragend quando a operação for completada, seja ela concluída com sucesso ou cancelada. Leia Finishing a Drag para mais informações.

Etiquetas do documento e colaboradores

 Colaboradores desta página: saviski, jpalharini
 Última atualização por: saviski,