Suporte ao recurso de arrastar e soltar por toque

O Internet Explorer 11 apresenta suporte nativo de HTML5 arrastar e soltar com base em toque.

A adição da funcionalidade arrastar e soltar ao seu aplicativo Web fornece uma maneira intuitiva aos usuários para mover ou copiar arquivos de um lugar para outro ou para reorganizar visualmente os itens de um conjunto. Assim como o Internet Explorer fornece suporte básico a toque por padrão, a maioria dos sites existentes que usam arrastar e soltar HTML5 devem "apenas funcionar" com um padrão de interação do usuário pressionar, segurar e arrastar. Apesar de você receber eventos de entrada do usuário no thread da interface do usuário, conforme esperado, o IE na verdade lida com a renderização e a animação de uma imagem arrastada fantasma em um thread separado, para manter o site o mais responsivo possível.

Importante  Esse recurso não tem suporte no IE11 no Windows 7.

Padrões de UX

Pressionar, segurar e arrastar

Para dispositivos de toque que usam conteúdo da Web, um padrão comum de interação com o usuário para arrastar e soltar é uma sequência de pressionar, segurar e arrastar. Este é o comportamento padrão de elementos com o atributo draggable no IE11. Muitos sites têm conteúdo secundário e dependem de movimento panorâmico/rolagem verticais; o Internet Explorer, na nova interface do usuário do Windows, fornece navegação para trás/para frente deslizando o dedo na horizontal. Por isso, o padrão pressionar, segurar e arrastar para arrastar e soltar com base em toque geralmente funciona melhor para sites no IE11, enquanto o padrão de deslizamento transversal é uma técnica efetiva para arrastar e soltar aplicativos da Windows Store.

Observação  O suporte para arrastar com base em toque e as operações de soltar são limitados a uma única janela do navegador. Embora não seja possível arrastar elementos entre janelas, há suporte para arrastar objetos de arquivo da área de trabalho do Windows para as janelas do IE11 na área de trabalho.

Deslizamento transversal

Muitos aplicativos da Windows Store e alguns sites usam um sistema de navegação simples, em que o usuário aplica panorâmica em uma única página ou navega pelas páginas que fazem parte do mesmo nível hierárquico do site. Usando o padrão de interação deslizamento transversal, esses aplicativos podem esclarecer se a intenção do usuário é se movimentar panoramicamente ou arrastar ao permitir apenas o movimento panorâmico ao longo de um eixo por meio da propriedade touch-action :


touch-action: pan-x;

E responder ao drag events e ao manipulation events ao longo do eixo perpendicular:

Padrão de interação de deslizamento transversal

Para aprimorar a experiência de usuário de deslizamento transversal, o IE11 e os aplicativos da Windows Store introduzem os valores cross-slide-x e cross-slide-y na propriedade touch-action. Esses valores pedem ao IE (ou ao Tempo de Execução do Windows, no caso de aplicativos da Windows Store) para responder a determinadas interações do usuário com animações de deslizamento transversal em um thread independente da interface do usuário.

Além disso, o IE11 e os aplicativos da Windows Store fornecem vários novos valores de estado para uma manipulação mais ajustada do MSManipulationEvent:

TermoDescrição

MS_MANIPULATION_STATE_PRESELECT

Um contato foi iniciado em uma interação de deslizamento transversal.

MS_MANIPULATION_STATE_SELECTING

Uma interação de deslizamento transversal atravessou o limite de distância da seleção, ativando-a.

MS_MANIPULATION_STATE_DRAGGING

Uma interação de deslizamento transversal atravessou o limite de distância do recurso arrastar, ativando-o.

MS_MANIPULATION_STATE_CANCELLED

Uma interação de deslizamento transversal foi cancelada; Isso pode acontecer por um destes motivos:

  • O usuário aciona a tecla Esc
  • A janela perdeu o foco
  • O ponteiro associado foi cancelado (por exemplo, devido a um problema no digitalizador)
  • A ação de arrastar foi cancelada via script (por exemplo, chamando preventDefault em um evento dragstart ou drag)

MS_MANIPULATION_STATE_COMMITTED

O ponteiro de toque foi aberto e o manuseio foi concluído.

 

Tópicos relacionados

Suporte da área de transferência para imagens

 

 

Mostrar:
© 2015 Microsoft