Прокрутка пользовательского интерфейса JQuery, сортируемого в JQM - PullRequest
Новая
       12

Прокрутка пользовательского интерфейса JQuery, сортируемого в JQM

2 голосов
/ 26 октября 2011

Я все еще новичок в JQuery + JQuery UI + JQM, поэтому, пожалуйста, прости меня, если мой вопрос тривиален, но поиск в интернете пока не помог. Моя проблема заключается в следующем:

Я пытаюсь реализовать редактор списков мобильных устройств, используя JQuery Mobile (JQM). У меня есть длинный список элементов, который занимает несколько страниц, и я хочу изменить порядок элементов в этом списке. Поэтому мне нужно иметь возможность перетаскивать объекты и прокручивать список.

В моем коде я использую JQuery UI-Sortable и JQM-Listview для достижения такого поведения. Вначале у меня была проблема с тем, что на мобильных устройствах любой жест перетаскивания элемента списка вызывал прокрутку списка без перемещения элемента. Я смог решить эту проблему, запустив simulatedEvent и проигнорировав обработчик по умолчанию на основе x-позиции события: 

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type = "mousemove"; break;        
        case "touchend":   type = "mouseup"; break;
        default: return;
    }


    var screenX = first.screenX;

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
                              first.screenX, first.screenY,
                              first.clientX, first.clientY, false,
                              false, false, false, 0/*left*/, null);

    $("#list1").sortable('refreshPositions');    

    if(screenX < 100)
    {
        first.target.dispatchEvent(simulatedEvent);
        event.preventDefault();     
    }
}

В результате я мог перемещать элементы, перетаскивая их с левой стороны экрана и прокручивая список, выполняя жест прокрутки с правой стороны экрана.

Чтобы получить постоянные колонтитулы + нижние колонтитулы и полосу прокрутки, которая указывает текущую позицию в списке, я встроил содержащий элемент в JQM-Scrollview (http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html). Однако теперь жесты перетаскивания и прокрутки снова мешают, так что любое перетаскивание приводит к прокрутке. Кроме того, полоса прокрутки отсутствует, хотя плагин, кажется, работает (можно заметить едва заметный эффект отскакивания).

Весь пример можно найти здесь: http://jsfiddle.net/7n6Ec/3/

Есть идеи, как встроить JQM-Listview, содержащий JQuery UI-Sortables, в JQM-Scrollview, чтобы можно было как перетаскивать, так и прокручивать, я получаю постоянный верхний и нижний колонтитулы и полосу прокрутки? (На самом деле что-то вроде редактора плейлистов iPod было бы оптимальным решением (http://www.tonybove.com/tonytips/figures_tips_ipod/playlist_edit2.jpg))

Thx, Себастьян

...