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?

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

Dies funktioniert auch auf Android-Tablets. Speziell auf einem Samsung Galaxy Tab 10.1 unter Android 3.1 getestet.

— Abwesenheit

Funktioniert auf Samsung Galaxy S2 mit Android 2.3.4

— MrUpsidown

Funktioniert auf Samsung Galaxy S2 mit Android 4.1.2

— Wessel Kranenborg

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

Ab 1/2014 funktioniert es nicht mehr mit dem Internet Explorer von Windows Phone. Wenn andere Browser verfügbar werden, funktioniert dies hoffentlich.

— Edcincy

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

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