jquery-ui sortierbar | Wie funktioniert es auf iPad / Touch-Geräten?

116

Wie kann ich die sortierbare Funktion von jQuery-UI auf dem iPad und anderen Touch-Geräten verwenden?

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

Ich habe versucht , zu verwenden event.preventDefault();, event.cancelBubble=true;und event.stopPropagation();mit der , touchmoveund die scrollEreignisse, aber das Ergebnis war , dass die Seite blättern nicht mehr.

Irgendwelche Ideen?

Ereignishorizont
quelle
Gibt es dafür einen Fehlerbericht?
Marc-André Lafortune
Könnte so etwas von Nutzen sein? github.com/mattbryson/TouchSwipe-Jquery-Plugin
Jinglesthula

Antworten:

216

Eine Lösung gefunden (bisher nur mit iPad getestet!)!

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

Ereignishorizont
quelle
9
Dies funktioniert auch auf Android-Tablets. Speziell auf einem Samsung Galaxy Tab 10.1 unter Android 3.1 getestet.
Abwesenheit
3
Funktioniert auf Samsung Galaxy S2 mit Android 2.3.4
MrUpsidown
1
Funktioniert auf Samsung Galaxy S2 mit Android 4.1.2
Wessel Kranenborg
2
Das funktioniert super! Obwohl ich eine Tabelle habe, die eine ganze Seite abdeckt, wird es schwierig, ohne bewegliche Elemente nach oben und unten zu scrollen. Hat jemand dieses Problem angesprochen? Wenn Sie etwas hinzufügen, um zu verhindern, dass sich Elemente bewegen, bis sie dieses bestimmte Element X Sekunden lang berührt haben, sollte dies den Trick tun?
Tom
2
Ab 1/2014 funktioniert es nicht mehr mit dem Internet Explorer von Windows Phone. Wenn andere Browser verfügbar werden, funktioniert dies hoffentlich.
Edcincy
7

Um die sortableArbeit auf dem Handy. Ich benutze Touch-Punch wie folgt:

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

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

Beachten Sie das Hinzufügen disableSelection();nach dem Erstellen der sortierbaren Instanz.

vpibano
quelle
0

Tom, ich habe dem mouseProto._touchStart- Ereignis folgenden Code hinzugefügt :

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
quelle