Animando sequências de arrastar e soltar (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]
Use animações de arrastar e soltar quando os usuários movem objetos com os dedos ou dispositivos de entrada, como um mouse ou uma caneta. As ações comuns de arrastar e soltar incluem mover um único item em uma lista e soltar um item sobre outro.
Observação Use as animações de arrastar e soltar somente quando o usuário estiver movendo o objeto. Para mover o objeto em outros casos, use a animação de reposição.
Este conjunto de animações consiste nas seguintes funções:
- dragSourceStart: o usuário começa a arrastar um objeto
- dragBetweenEnter: o usuário arrasta um objeto entre dois outros objetos entre os quais ele pode ser solto
- dragBetweenLeave: o usuário arrasta um objeto para fora de um possível local de destino
- dragSourceEnd: o usuário solta um objeto que estava sendo arrastado
O suporte de arrastar padrão está disponível em ListView e em GridLayout para JavaScript. As animações de arrastar e soltar estão integradas quando você usa esses controles em sua interface do usuário. Porém, as animações às quais nos referimos neste tópico são úteis se você estender o recurso de arrastar e soltar para outros controles, particularmente para os seus próprios controles personalizados.
O vídeo a seguir demonstra as animações associadas a uma operação de arrastar e soltar:
Início de arraste
Cada sequência de animação de arrastar e soltar começa com um início de arraste (dragSourceStart), mostrado quando o usuário começa a arrastar um objeto.
A animação modifica a aparência da origem do arraste (o objeto sendo arrastado) e de um ou mais objetos afetados. Um objeto afetado é um objeto que poderia mudar de posição em resposta a uma sequência de arrastar e soltar. Por exemplo, ao reordenar uma lista, todos os itens da lista que não sejam a origem do arraste são objetos afetados porque a posição deles na lista pode mudar. Os itens afetados são animados para mostrar ao usuário como esses itens mudariam de posição em resposta à ação atual. Observe que nem todas as origens de arraste têm objetos afetados.
Para usar a função dragSourceStart, você precisará saber qual objeto o usuário está arrastando e quais são os objetos afetados.
As imagens a seguir mostram a relação entre a origem de arraste e os objetos afetados na animação de início de arraste. A primeira imagem mostra o objeto de arraste e seus objetos adjacentes antes de o usuário começar a arrastar o objeto.
.png "Quatro objetos do mesmo tamanho, um rotulado como origem de arraste")
Quando o usuário seleciona o objeto e começa a arrastá-lo, o objeto arrastado fica maior e os objetos afetados ficam menores.
.png "Quatro objetos, com a origem de arraste em tamanho maior e os outros três objetos afetados em tamanho um pouco menor")
A imagem a seguir mostra o caso em que os objetos adjacentes não são afetados.
.png "Quatro objetos, com a origem de arraste em tamanho maior e os outros três inalterados em comparação com o tamanho inicial")
Término de arraste
Cada sequência de animação de arrastar e soltar acaba com a animação de término de arraste (dragSourceEnd), mostrada quando o usuário solta um objeto arrastado. A animação de término de arraste só é usada depois que a animação de início de arraste é usada primeiro.
A animação de término de arraste insere a origem de arraste (o objeto que está sendo arrastado) na sua posição final. Ao mesmo tempo, ela também remove as mudanças visuais na origem de arraste e os itens afetados que foram aplicados pela animação de início de arraste. Os objetos afetados em uma chamada a dragSourceEnd sempre são os mesmos usados na chamada a dragSourceStart.
Para usar a função dragSourceEnd, você precisará saber qual objeto o usuário está soltando, a posição final do objeto solto e os objetos afetados (se a função dragSourceStart os incluiu).
As imagens a seguir mostram a relação entre a origem de arraste e seus objetos afetados na animação de término de arraste. A primeira imagem mostra um objeto antes de o usuário soltá-lo em um conjunto de objetos afetados. A origem de arraste aparece maior que o tamanho normal e é deslocada da lista. Os objetos afetados aparecem menores que o tamanho normal.
.png "Quatro objetos, com a origem de arraste em tamanho maior e deslocados do plano dos outros três objetos afetados, com tamanho um pouco menor")
Esta imagem a seguir mostra o caso em que o objeto solto não afeta outros objetos. A origem de arraste aparece maior novamente e deslocada dos outros objetos, mas eles aparecem em tamanho normal.
.png "Quatro objetos, com a origem de arraste em tamanho maior e deslocados dos outros três objetos, que estão inalterados em comparação com o tamanho inicial")
Depois que o usuário solta a origem de arraste, todos os objetos voltam ao tamanho normal, reposicionados se necessário.
Arraste intermediário na entrada
Use a animação de arraste intermediário na entrada (dragBetweenEnter) quando o usuário arrasta um objeto (origem do arraste) no meio de dois outros objetos entre os quais ele pode ser solto. Essa animação mostra ao usuário os objetos afetados que se separarão para dar espaço à origem de arraste se o usuário optar por soltar a origem de arraste nessa posição.
Para usar a função dragBetweenEnter, você precisará saber quais são os objetos afetados e a direção e distância em que eles se moverão como parte da animação.
As imagens a seguir mostram o movimento dos objetos afetados em resposta à origem de arraste. A primeira imagem mostra os objetos afetados antes de a origem de arraste disparar a animação de arraste intermediário na entrada.
.png "Objeto de origem de arraste sobrepondo dois objetos afetados que são mostrados em suas posições originais")
Na imagem a seguir, a animação de arraste intermediário na entrada fez com que fossem separados os dois objetos em cada um dos lados da origem de arraste.
.png "Objeto de origem de arraste sobrepondo dois objetos afetados que foram separados para mostrar o local de soltar")
Arraste intermediário na saída
Use a animação de arraste intermediário na saída (dragBetweenLeave) quando o usuário arrastar a origem de arraste para fora de uma área de soltar legítima entre dois objetos. Esta animação mostra ao usuário que ele não tem mais a origem de arraste em posição para ser solta entre esses dois objetos. A animação de arraste intermediário na saída é usada somente depois de uma animação de arraste intermediário na entrada.
A ação da animação de arraste intermediário na saída é oposta à da animação de arraste intermediário na entrada. A animação de arraste intermediário na saída move os objetos afetados de volta às suas posições originais.
Para usar a função dragBetweenLeave, você precisará saber quais são os objetos afetados.
As imagens a seguir mostram o movimento dos objetos afetados em resposta à origem de arraste. A primeira imagem mostra os objetos afetados separados pela animação de entrada da origem de arraste em resposta à posição da origem de arraste.
Na imagem seguinte, a animação de arraste intermediário na saída foi chamada para trazer os objetos afetados de volta às suas posições iniciais.
Outros recursos
Para obter exemplos de código que demonstram o uso de funções de animação de arrastar e soltar, consulte o Exemplo de biblioteca de animação HTML.
Para obter práticas recomendadas no uso dessas animações, consulte Diretrizes e lista de verificação para animações de arrastar e soltar.
Tópicos relacionados
Animando sua interface do usuário
dragSourceStart