Arrastar e soltar

  • Revision slug: DragDrop/Arrastar_e_Soltar
  • Revision title: Arrastar e soltar
  • Revision id: 294806
  • Criado:
  • Criador: jpalharini
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

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 sobrew um elemento, arrastá-lo para outro lugar e soltá-lo neste lugr 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.

{{ HTML5ArticleTOC() }}

{{ languages( { "es": "es/ArrastrarSoltar/Arrastrar_y_soltar", "ja": "Ja/DragDrop/Drag_and_Drop","fr": "Fr/DragDrop/Drag_and_Drop" } ) }}

Fonte da revisão

<p>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 sobrew um elemento, arrastá-lo para outro lugar e soltá-lo neste lugr 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.</p>
<div class="note">
  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 <a href="/en/Drag_and_Drop" title="Older Drag and Drop API">older API documentation</a>.</div>
<h2 id="Drag_and_drop_basics">Conceitos básicos sobre o "arrastar e soltar"</h2>
<p>Quando começa o processo de arrastar, várias informações devem ser consideradas:</p>
<ul>
  <li>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<a href="https://developer.mozilla.org/En/DragDrop/Drag_Operations#dragdata" title="Drag Data"> Drag Data</a>.</li>
  <li>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 <a href="/En/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Setting the Drag Feedback Image</a>.</li>
  <li>as ações permitidas. Três tipos de ações são possíveis: <code>copy </code>serve para indicar que os dados serão copiados da posição atual para uma nova, <code>move</code>, para mover os dados de sua localização atual para a nova e <code>link</code>, 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 <a href="/En/DragDrop/Drag_Operations#drageffects" title="Drag Effects">Drag Effects</a> para mais detalhes.</li>
</ul>
<p>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 <a href="/En/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a>.</p>
<p>Para uma lista de tipos comuns de dados utilizados em processos de arrastar e soltar, veja <a href="/En/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">Recommended Drag Types</a>.</p>
<p>Estão disponíveis, também, explicações básicas sobre como mover os seguintes tipos de dados:</p>
<ul>
  <li><a href="/En/DragDrop/Recommended_Drag_Types#text" title="Text">Text</a></li>
  <li><a href="/En/DragDrop/Recommended_Drag_Types#link" title="Links">Links</a></li>
  <li><a href="/En/DragDrop/Recommended_Drag_Types#html" title="HTML and XML">HTML and XML</a></li>
  <li><a href="/En/DragDrop/Recommended_Drag_Types#file" title="Files">Files</a></li>
  <li><a href="/En/DragDrop/Recommended_Drag_Types#image" title="Images">Images</a></li>
  <li><a href="/En/DragDrop/Recommended_Drag_Types#node" title="Document Nodes">Document Nodes</a></li>
</ul>
<p>Veja <a href="/En/DragDrop/DataTransfer" title="DataTransfer">DataTransfer</a> para uma explicação sobre o objeto DataTransfer.</p>
<h2 id="events" name="events">Eventos</h2>
<p>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 <code>mousemove</code> não são utilizados.</p>
<p>A propriedade <a href="/En/DragDrop/DataTransfer" title="dataTransfer">dataTransfer</a> contém os dados de todos os eventos relacionados com a operação de arrastar e soltar.</p>
<dl>
  <dt>
    dragstart</dt>
  <dd>
    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 <em>listener</em> pega informções como os dados arrastados e a imagem a ser associada com a ação. Para informações sobre isso, leia <a href="/En/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">Starting a Drag Operation</a>.</dd>
  <dt>
    dragenter</dt>
  <dd>
    Iniciado quando o mouse é movido pela primeira vez sobre um elemento enquanto um objeto está sendo arrastado. Um <em>listener</em> para este evento deverá indicador se é permitido soltar o objeto naquele local. Se não há <em>listeners</em>, 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 <a href="/En/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd>
  <dt>
    dragover</dt>
  <dd>
    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 <em>dragenter</em>. Para saber mais, consulte <a href="/En/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">Specifying Drop Targets</a>.</dd>
  <dt>
    dragleave</dt>
  <dd>
    O evento é iniciado quando o mouse sai de um elemento quando há um objeto sendo arrastado. Qualquer tipo de retorno provido anteriormente no <em>dragover</em> ou <em>dragenter</em> deverá ser removido.</dd>
  <dt>
    drag</dt>
  <dd>
    Este é disparado na origem da operação, ou seja, o elemento onde o <em>dragstart</em> foi iniciado.</dd>
  <dt>
    drop</dt>
  <dd>
    O evento <em>drop </em>se inicia no local onde o objeto é movido, ou seja, ao fim da operação, um <em>listener</em> 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 <em>Escape</em> ou soltando o botão do mouse fora de um local válido. Para mais, veja <a href="/En/DragDrop/Drag_Operations#drop" title="Performing a Drop">Performing a Drop</a>.</dd>
  <dt>
    dragend</dt>
  <dd>
    O local de origem do objeto receberá um evento <em>dragend</em> quando a operação for completada, seja ela concluída com sucesso ou cancelada. Leia <a href="/En/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Finishing a Drag</a> para mais informações.</dd>
</dl>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "es": "es/ArrastrarSoltar/Arrastrar_y_soltar", "ja": "Ja/DragDrop/Drag_and_Drop","fr": "Fr/DragDrop/Drag_and_Drop" } ) }}</p>
Reverter para esta revisão