Question

我仍然是新的JQuery + JQuery UI + JQM，所以请原谅我，如果我的问题很简单，但到目前为止搜索互联网并没有帮助。我的问题如下：

我正在尝试使用JQuery Mobile（JQM）实现移动列表编辑器。我有一长串填充多个页面的项目，我想重新排序该列表中的项目。因此，我需要能够拖动项目并滚动列表。

在我的代码中，我使用JQuery UI-Sortable和JQM-Listview来实现这种行为。我在开始时遇到的问题是，在移动设备上，列表项的任何拖动手势都会导致列表滚动而不移动元素。我能够通过触发simulationEvent并忽略基于事件的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/

任何想法如何将包含JQuery UI-Sortables的JQM-Listview嵌入到JQM-Scrollview中，以便拖动和滚动都可以，我得到持久的页眉+页脚和滚动条？（实际上类似于iPod播放列表的编辑器将是最佳解决方案（http://www.tonybove.com/tonytips/figures_tips_ipod/playlist_edit2.jpg））

THX，塞巴斯蒂安

在JQM中滚动JQuery UI可排序

0 个答案: