wake-up-neo.com

jquery-ui sortierbar | Wie bekomme ich es auf iPad / Touchdevices zum Laufen?

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, event.preventDefault();, event.cancelBubble=true; Und event.stopPropagation(); mit den Ereignissen touchmove und scroll zu verwenden, aber das Ergebnis war das Die Seite scrollt nicht mehr.

Irgendwelche Ideen?

108
eventhorizon

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

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

213
eventhorizon

Damit sortable auf Mobilgeräten funktioniert. Ich benutze Touch-Punch wie folgt:

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

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

Beachten Sie, dass Sie nach dem Erstellen der sortierbaren Instanz disableSelection(); hinzufügen.

2
vpibano

Tom, ich habe folgenden Code zum mouseProto._touchStart -Ereignis 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);
    }
};
0
Karan Dubal