Arrastar e soltar HTML em dispositivos móveis

Quando você adiciona arrastar e soltar em uma página da web usando JavaScript, como o jQuery UI arrastável e soltável, como você faz isso funcionar quando visualizado por meio de um navegador em um dispositivo móvel - onde as ações da tela de toque para arrastar são interceptadas pelo telefone para rolar a página, etc?

Todas as soluções são bem-vindas ... meus pensamentos iniciais são:

1. Tenha um botão para dispositivos móveis que "levanta" o item a ser arrastado e, em seguida, faça com que eles cliquem na zona em que desejam soltar o item.

2. Escreva um aplicativo que faça isso para dispositivos móveis em vez de tentar fazer com que a página da web funcione neles!

3. Suas sugestões e comentários, por favor.

O jQuery UI Touch Punch resolve tudo.

É um suporte de evento de toque para jQuery UI. Basicamente, ele apenas conecta o evento de toque de volta à UI do jQuery. Testado em iPad, iPhone, Android e outros dispositivos móveis habilitados para toque. Eu usei o jQuery UI classificável e funciona perfeitamente.

http://touchpunch.furf.com/

Há um novo polyfill para traduzir eventos de toque para arrastar e soltar, de forma que o arrastar e soltar HTML5 seja utilizável em dispositivos móveis.

O polyfill foi apresentado por Bernardo Castilho neste post .

Aqui está uma demonstração desse post.

A postagem também apresenta várias considerações sobre o design do folyfill.

A versão beta do Sencha Touch tem suporte para arrastar e soltar.

Você pode consultar o Exemplo DnD . A propósito, isso só funciona em navegadores webkit.

Adaptar essa lógica em uma página da web provavelmente será difícil. Pelo que entendi, eles desabilitam todos os panning do navegador e implementam eventos de panning inteiramente em javascript, permitindo a interpretação correta de arrastar e soltar.

Atualização: o link do exemplo original está morto, mas encontrei esta alternativa:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Eu precisava criar um arrastar e soltar + rotação que funcionasse em desktop, celular, tablet, incluindo Windows Phone. O último tornou tudo mais complicado (mspointer vs. eventos de toque).

A solução veio da grande biblioteca Greensock

Demorou alguns saltos através de aros para fazer o mesmo objeto arrastável e giratório, mas funciona perfeitamente

Você também pode tentar o polyfill drag-n-drop de Tim Ruffle , certamente semelhante ao de Bernardo Castilho (ver resposta @remdevtec).

Basta fazer npm install mobile-drag-drop --save(outros métodos de instalação disponíveis, por exemplo, com caramanchão)

Então, qualquer interface de elemento que dependa da detecção de toque deve funcionar no celular (por exemplo, arrastar apenas um elemento, em vez de rolar + arrastar ao mesmo tempo).

Jquery Touch Punch é ótimo, mas o que ele também faz é desabilitar todos os controles no div arrastável, então para evitar isso você tem que alterar as linhas ... (no momento da escrita - linha 75)

mudança

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

ler

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

adicione quantos ors quiser para cada um dos elementos que deseja 'desbloquear'

Espero que ajude alguém

aqui está minha solução:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

A biblioteca Sortable JS é compatível com telas sensíveis ao toque e não requer jQuery.

A maneira como ele lida com telas sensíveis ao toque é que você precisa tocar na tela por cerca de 1 segundo para começar a arrastar um item.

Além disso, eles apresentam um teste de vídeo mostrando que esta biblioteca está sendo executada mais rapidamente do que o JQuery UI Sortable.