Javascript Arraste e solte para dispositivos touch [fechado]

Estou procurando um plug-in drag & DROP que funcione em dispositivos touch.

Gostaria de funcionalidade semelhante ao plugin jQuery UI, que permite elementos "droppable".

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

Aqui está o recurso de arrastar e soltar que suporta apenas iPhone / iPad.

Alguém pode me apontar na direção de um plug-in 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 eventos do mouse em toque, e é disso que você precisa. A biblioteca que eu recomendo é https://github.com/furf/jquery-ui-touch-punch , com este seu arrastar e soltar da interface do usuário do Jquery deve funcionar em aparelhos de toque

ou você pode usar esse código que estou usando, também converte os eventos do mouse em contato 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 função 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 algumas globais:

var clickms = 100;
var lastTouchDown = -1;

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

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 ajustar os 'cliques' ao seu gosto. Basicamente, é só procurar um 'touchstart' seguido rapidamente por um 'touchend' para simular um clique.

Obrigado pelos códigos acima! - Tentei várias opções e esse foi o ingresso. Eu tive problemas em que preventDefault estava impedindo a rolagem no ipad - agora estou testando 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 do gregpress , mas meus itens arrastáveis ​​usavam uma classe em vez de um ID. Parece funcionar.

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

Fio velho que eu sei .......

O problema com a resposta do @ryuutatsuo é que ele bloqueia também qualquer entrada ou outro elemento que precise reagir com 'cliques' (por exemplo, entradas), então escrevi esta solução. Essa solução possibilitou o uso de qualquer biblioteca de arrastar e soltar existente baseada em eventos de remoção de mouse, remoção de mouse e mouse em qualquer dispositivo de toque (ou cumputador). Essa também é uma solução para vários navegadores.

Eu testei em vários dispositivos e 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 jQuery para que você possa usá-lo apenas com bibliotecas jQuery. Eu usei o jQuery 1.5.1 para isso porque algumas funções mais recentes não funcionam corretamente com o IE9 e superior (não testadas com versões mais recentes do jQuery).

Antes de adicionar qualquer operação de arrastar ou soltar em um evento, você deve chamar esta função primeiro :

simulateTouchEvents(<object>);

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

simulateTouchEvents(<object>, true); // ignore events on childs

Aqui está o código que escrevi. Usei alguns truques legais para acelerar a avaliação das coisas (consulte 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 faz: no início, converte eventos de toque único em eventos de mouse. Ele verifica se um evento é causado por um elemento no / no elemento que deve ser arrastado. Se for um elemento de entrada como input, textarea etc, pulará a tradução ou, se um evento de mouse padrão estiver anexado, também pulará uma tradução.

Resultado: todos os elementos de um elemento arrastável ainda estão funcionando.

Feliz codificação, greetz, Erwin Haantjes