jquery-ui ordinabile | Come farlo funzionare su iPad / dispositivi touch?


116

Come faccio a far funzionare la funzione ordinabile jQuery-UI su iPad e altri dispositivi touch?

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

Ho cercato di utilizzare event.preventDefault();, event.cancelBubble=true;e event.stopPropagation();con il touchmovee ilscroll eventi, ma il risultato è stato che la pagina non scorre più.

Qualche idea?


C'è una segnalazione di bug per questo?
Marc-André Lafortune

Potrebbe essere utile qualcosa di simile? github.com/mattbryson/TouchSwipe-Jquery-Plugin
jinglesthula

Risposte:


216

Trovata una soluzione (testata solo con iPad fino ad ora!)!

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


9
Funziona anche su tablet Android. Specificamente testato su una scheda Samsung Galaxy 10.1 su Android 3.1.
assenza

3
Funziona su Samsung Galaxy S2 con Android 2.3.4
MrUpsidown

1
Funziona su Samsung Galaxy S2 con Android 4.1.2
Wessel Kranenborg

2
Funziona benissimo! Anche se ho una tabella che copre un'intera pagina, diventa difficile scorrere su e giù senza spostare elementi. Qualcuno ha affrontato questo problema? Aggiungere qualcosa per impedire agli elementi di spostarsi fino a quando non hanno toccato quello specifico per X secondi dovrebbe fare il trucco?
Tom

2
A partire dal 1/2014, non funziona su Internet Explorer di Windows Phone. Si spera che quando altri browser saranno disponibili questo funzionerà.
edcincy

7

Per sortablelavorare sul cellulare. Sto usando il touch-punch in questo modo:

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

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

Prendi nota dell'aggiunta disableSelection();dopo aver creato l'istanza ordinabile.


0

Tom, ho aggiunto il seguente codice all'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);
    }
};
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.