jquery-ui classificável | Como fazê-lo funcionar em dispositivos iPad / touch?

116

Como faço para que o recurso classificável do jQuery-UI funcione no iPad e em outros dispositivos de toque?

http://jqueryui.com/demos/sortable/

Eu tentei usar event.preventDefault();, event.cancelBubble=true;e event.stopPropagation();com otouchmove e os scrolleventos, mas o resultado foi que a página não rola mais.

Alguma ideia?

Horizonte de eventos
fonte
Existe um relatório de bug para isso?
Marc-André Lafortune
Algo assim poderia ser útil? github.com/mattbryson/TouchSwipe-Jquery-Plugin
jinglesthula

Respostas:

216

Encontrou uma solução (testado apenas com iPad até agora!)!

http://touchpunch.furf.com/content.php?/sortable/default-functionality

Horizonte de eventos
fonte
9
Isso também funciona no tablet Android. Testado especificamente em uma guia Samsung Galaxy 10.1 no Android 3.1.
absinto
3
Funciona no Samsung Galaxy S2 com Android 2.3.4
MrUpsidown
1
Funciona no Samsung Galaxy S2 com Android 4.1.2
Wessel Kranenborg,
2
Isso funciona muito bem! Embora eu tenha uma tabela que cobre uma página inteira, é difícil rolar para cima e para baixo sem mover os elementos. Alguém abordou esse problema? Adicionar algo para evitar que os elementos se movam até que tenham tocado naquele específico por X segundos deve resolver?
Tom,
2
Desde 1/2014, ele não funciona no Internet Explorer do Windows Phone. Esperançosamente, quando outros navegadores estiverem disponíveis, isso funcionará.
edcincy
7

Para fazer sortabletrabalho no celular. Estou usando um toque de soco assim:

$("#target").sortable({
  // option: 'value1',
  // otherOption: 'value2',
});

$("#target").disableSelection();

Anote a adição disableSelection();após criar a instância classificável.

vpibano
fonte
0

Tom, adicionei o seguinte código ao evento mouseProto._touchStart :

var time1Sec;
var ifProceed = false, timerStart = false;
mouseProto._touchStart = function (event) {

    var self = this;

    // Ignore the event if another widget is already being handled
    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
        return;
    }

    if (!timerStart) {
        time1Sec = setTimeout(function () {
            ifProceed = true;
        }, 1000);
        timerStart=true;
    }
    if (ifProceed) {
        // Set the flag to prevent other widgets from inheriting the touch event
        touchHandled = true;

        // Track movement to determine if interaction was a click
        self._touchMoved = false;

        // Simulate the mouseover event
        simulateMouseEvent(event, 'mouseover');

        // Simulate the mousemove event
        simulateMouseEvent(event, 'mousemove');

        // Simulate the mousedown event
        simulateMouseEvent(event, 'mousedown');
        ifProceed = false;
         timerStart=false;
        clearTimeout(time1Sec);
    }
};
Karan Dubal
fonte