jquery-ui сортування | Як змусити його працювати на iPad / touchdevices?


116

Як отримати функцію сортування jQuery-інтерфейсу користувача, яка працює на iPad та інших сенсорних пристроях?

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

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

Будь-які ідеї?


Чи є звіт про помилку для цього?
Марк-Андре Лафортун

Чи може щось подібне бути корисним? 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.
абсинс

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.