jquery-ui sortable | Jak sprawić, by działał na iPadzie / urządzeniach dotykowych?

116

Jak sprawić, by funkcja sortowania jQuery-UI działała na iPadzie i innych urządzeniach dotykowych?

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

Próbowałem za pomocą event.preventDefault();, event.cancelBubble=true;oraz event.stopPropagation();z touchmovei scrollwydarzenia, ale wynik był taki, że strona nie przewijać dłużej.

Jakieś pomysły?

horyzont zdarzeń
źródło
Czy jest dla tego raport o błędzie?
Marc-André Lafortune
Czy coś takiego mogłoby się przydać? github.com/mattbryson/TouchSwipe-Jquery-Plugin
jinglesthula

Odpowiedzi:

216

Znalazłem rozwiązanie (do tej pory testowane tylko z iPadem!)!

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

horyzont zdarzeń
źródło
9
Działa to również na tablecie z Androidem. Specjalnie przetestowany na karcie Samsung Galaxy 10.1 w systemie Android 3.1.
absync
3
Działa na
Samsungu
1
Działa na Samsung Galaxy S2 z Androidem 4.1.2
Wessel Kranenborg
2
To działa świetnie! Chociaż mam tabelę obejmującą całą stronę, trudno jest przewijać w górę iw dół bez przesuwania elementów. Czy ktoś poruszył ten problem? Dodanie czegoś, co zapobiegnie przesuwaniu się elementów, dopóki nie dotkną tego konkretnego przez X sekund, powinno załatwić sprawę?
Tom
2
Od 1/2014 nie działa w przeglądarce Internet Explorer systemu Windows Phone. Miejmy nadzieję, że to zadziała, gdy staną się dostępne inne przeglądarki.
edcincy
7

Aby sortablepracować na telefonie komórkowym. Używam uderzenia dotykowego w ten sposób:

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

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

Zwróć uwagę na dodanie disableSelection();po utworzeniu instancji z możliwością sortowania.

vpibano
źródło
0

Tomek, dodałem następujący kod do zdarzenia 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
źródło