jquery-ui ordenable | ¿Cómo hacer que funcione en dispositivos iPad / táctiles?

116

¿Cómo consigo que la función de ordenación jQuery-UI funcione en iPad y otros dispositivos táctiles?

Traté de usar event.preventDefault();, event.cancelBubble=true;y event.stopPropagation();con el touchmovey los scrollacontecimientos, pero el resultado fue que la página no se desplaza por más tiempo.

¿Algunas ideas?

— eventhorizon
fuente

¿Hay un informe de error para esto?

— Marc-André Lafortune

¿Podría ser útil algo como esto? github.com/mattbryson/TouchSwipe-Jquery-Plugin

— jinglesthula

Respuestas:

216

Encontré una solución (¡solo probada con iPad hasta ahora!)!

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

— eventhorizon
fuente

Esto también funciona en tabletas Android. Probado específicamente en un Samsung Galaxy Tab 10.1 en Android 3.1.

— ausencia

Funciona en Samsung Galaxy S2 con Android 2.3.4

— MrUpsidown

Funciona en Samsung Galaxy S2 con Android 4.1.2

— Wessel Kranenborg

¡Esto funciona muy bien! Aunque tengo una tabla que cubre una página completa, es difícil desplazarse hacia arriba y hacia abajo sin elementos móviles. ¿Alguien ha abordado este problema? ¿Agregar algo para evitar que los elementos se muevan hasta que hayan tocado ese específico durante X segundos debería ser suficiente?

— Tom

A partir del 1/2014, no funciona en Internet Explorer de Windows Phone. Con suerte, cuando otros navegadores estén disponibles, esto funcionará.

— edcincy

Para hacer que sortablefuncione en el móvil. Estoy usando touch-punch como este:

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

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

Tome nota de agregar disableSelection();después de crear la instancia ordenable.

— vpibano
fuente

Tom, he agregado el siguiente código al 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
fuente