Pegando e levando pela mão

Dispositivos touch (smartphones, tablets, e ultrabooks) são cada vez mais frequentes nas nossas vida. Uma coisa que já comentei foi sobre trabalhar com design responsivo, fazendo com que o conteúdo seja mostrado da melhor forma de acordo com o tamanho da tela.Também comentei sobre o recurso de drag’n’drop que facilita bastante algumas operações para o usuário.

Fui pesquisar como fazer tudo misturado, fazer drag’n’drop no celular. A grande diferença é que o touch não tem mouse (óbvio) o que causa algumas modificações no comportamento do browser.

Por exemplo: caso um elemento tenha um “hover” (comportamento quando o cursor do mouse fica sobre o elemento), este comportamento é feito quando o usuário toca 1 vez sobre o elemento. O click funciona no próximo toque.

Dessa forma o jquery UI não consegue realizar o drag’n’drop normalmente. Procurando um pouco encontrei o jQuery UI Touch Punch (http://touchpunch.furf.com/). Com esse script é possível, sem nenhum codificação extra, realizar drag’n’drop com o toque.

Fiz um exemplo em http://jsfiddle.net/caliel/ZDKAD/2/ e funcionou perfeitamente. Graças a isso as facilidades do mouse se juntam a facilidade do touch. O melhor de dois mundos.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s