jquery-ui с возможностью сортировки | Как заставить его работать на iPad / сенсорных устройствах?


116

Как заставить функцию сортировки jQuery-UI работать на iPad и других сенсорных устройствах?

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

Я попытался с помощью event.preventDefault();, event.cancelBubble=true;и event.stopPropagation();с touchmoveиscroll события, но результат был , что страница не прокручивается больше.

Любые идеи?


Есть ли для этого отчет об ошибке?
Marc-André Lafortune

Может ли что-то подобное быть полезным? github.com/mattbryson/TouchSwipe-Jquery-Plugin
jinglesthula

Ответы:


216

Нашел решение (до сих пор тестировал только с iPad!)!

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


9
Это работает и на планшете Android. Специально протестировано на вкладке Samsung Galaxy 10.1 на Android 3.1.
Absynce

3
Работает на Samsung Galaxy S2 с Android 2.3.4
MrUpsidown

1
Работает на Samsung Galaxy S2 с Android 4.1.2
Wessel Kranenborg

2
Это прекрасно работает! Хотя у меня есть таблица, покрывающая всю страницу, становится трудно прокручивать вверх и вниз без перемещения элементов. Кто-нибудь обращался к этой проблеме? Добавление чего-то, что предотвращает перемещение элементов до тех пор, пока они не коснутся этого конкретного элемента в течение X секунд, должно помочь?
Том

2
По состоянию на 1/2014 он не работает в Internet Explorer Windows Phone. Надеюсь, когда станут доступны другие браузеры, это сработает.
edcincy

7

Чтобы заставить sortableработать на мобильном телефоне. Я использую сенсорный удар вот так:

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

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

Обратите внимание на добавление disableSelection();после создания сортируемого экземпляра.


0

Том, я добавил следующий код в событие 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);
    }
};
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.