Javascript Arrastar e soltar para dispositivos de toque

Eu estou procurando um plug-in de arrastar e soltar que funciona em dispositivos de toque.

Eu gostaria de funcionalidade semelhante ao plugin jQuery UI, que permite elementos “droppable”.

O plugin jqtouch suporta arrastar, mas não solta .

Aqui está o drag & drop que suporta apenas o iPhone / iPad.

Alguém pode me apontar na direção de um plugin de arrastar e soltar que funciona no android / ios?

… Ou pode ser possível atualizar o plugin jqtouch para droppability, ele já roda no Andriod e no IOS.

Obrigado!

    Você pode usar a interface do usuário do Jquery para arrastar e soltar com uma biblioteca adicional que converte os events do mouse em toque, que é o que você precisa, a biblioteca que eu recomendo é https://github.com/furf/jquery-ui-touch-punch , com este seu arrastar e soltar de Jquery UI deve funcionar em aparelhos de toque

    ou você pode usar este código que eu estou usando, ele também converte events do mouse em toque e funciona como mágica.

    function touchHandler(event) { var touch = event.changedTouches[0]; var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent({ touchstart: "mousedown", touchmove: "mousemove", touchend: "mouseup" }[event.type], true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); touch.target.dispatchEvent(simulatedEvent); event.preventDefault(); } function init() { document.addEventListener("touchstart", touchHandler, true); document.addEventListener("touchmove", touchHandler, true); document.addEventListener("touchend", touchHandler, true); document.addEventListener("touchcancel", touchHandler, true); } 

    E no seu document.ready basta chamar a function init ()

    código encontrado aqui

    Para quem quer usar isso e manter a funcionalidade ‘clique’ (como John Landheer menciona em seu comentário), você pode fazer isso com apenas algumas modificações:

    Adicione um par de globals:

     var clickms = 100; var lastTouchDown = -1; 

    Em seguida, modifique a instrução switch do original para isto:

     var d = new Date(); switch(event.type) { case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break; case "touchmove": type="mousemove"; lastTouchDown = -1; break; case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break; default: return; } 

    Você pode querer ajustar 'clickms' ao seu gosto. Basicamente, é apenas assistir a um 'touchstart' seguido rapidamente por um 'touchend' para simular um clique.

    Obrigado pelos códigos acima! – Eu tentei várias opções e esta foi a passagem. Eu tive problemas em que preventDefault estava impedindo a rolagem no ipad – agora estou testando para itens arrastáveis ​​e funciona muito bem até agora.

     if (event.target.id == 'draggable_item' ) { event.preventDefault(); } 

    Eu tinha a mesma solução que a resposta gregpress , mas meus itens arrastáveis ​​usavam uma class em vez de um id. Parece funcionar.

     var $target = $(event.target); if( $target.hasClass('draggable') ) { event.preventDefault(); } 

    Tópico antigo eu sei …….

    O problema com a resposta de @ryuutatsuo é que bloqueia também qualquer input ou outro elemento que tenha que reagir a ‘cliques’ (por exemplo, inputs), então eu escrevi esta solução. Essa solução tornou possível usar qualquer biblioteca de arrastar e soltar existente baseada em events mousedown, mousemove e mouseup em qualquer dispositivo de toque (ou computador). Essa também é uma solução entre navegadores.

    Eu testei em vários dispositivos e ele funciona rápido (em combinação com o recurso de arrastar e soltar do ThreeDubMedia (consulte também http://threedubmedia.com/code/event/drag )). É uma solução da jQuery, portanto, você pode usá-la apenas com as bibliotecas do jQuery. Eu usei o jQuery 1.5.1 porque algumas funções mais novas não funcionam corretamente com o IE9 e acima (não testadas com versões mais novas do jQuery).

    Antes de adicionar qualquer operação de arrastar ou soltar a um evento, você deve chamar essa function primeiro :

     simulateTouchEvents(); 

    Você também pode bloquear todos os componentes / filhos para input ou acelerar a manipulação de events usando a seguinte syntax:

     simulateTouchEvents(, true); // ignore events on childs 

    Aqui está o código que eu escrevi. Eu usei alguns truques para acelerar a avaliação das coisas (veja o código).

     function simulateTouchEvents(oo,bIgnoreChilds) { if( !$(oo)[0] ) { return false; } if( !window.__touchTypes ) { window.__touchTypes = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'}; window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1}; } $(oo).bind('touchstart touchmove touchend', function(ev) { var bSame = (ev.target == this); if( bIgnoreChilds && !bSame ) { return; } var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type e = ev.originalEvent; if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type] ) { return; } //allow multi-touch gestures to work var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false, b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false; if( b || window.__touchInputs[ev.target.tagName] ) { return; } //allow default clicks to work (and on inputs) // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent"); newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); touch.target.dispatchEvent(newEvent); e.preventDefault(); ev.stopImmediatePropagation(); ev.stopPropagation(); ev.preventDefault(); }); return true; }; 

    O que ele faz: primeiro, ele traduz events de toque único em events de mouse. Ele verifica se um evento é causado por um elemento no / no elemento que deve ser arrastado. Se for um elemento de input como input, área de texto, etc, ele ignora a tradução ou, se um evento de mouse padrão estiver anexado a ele, também ignorará uma tradução.

    Resultado: cada elemento em um elemento arrastável ainda está funcionando.

    Codificação feliz, greetz, Erwin Haantjes