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.
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:
copyserve 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 elink, 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.