jQuery UI Sortable - 当页面可滚动时,Div不可拖动

Question

提前谢谢你看看我的问题.

我正在创建一个网站,其中我有一个div列表,可以在Y轴上使用jQuery UI进行排序.
由于我希望使用触摸在移动设备上运行,因此我必须添加一些黑客以确保jQuery UI可用(因为它目前不支持触摸事件.).
这个hack被称为jQuery UI touch punch.
网站:jQuery UI触摸打孔.
GitHub:jQuery UI触摸打孔.

现在来了我的问题.有时列表变得如此之大,以至于网站将可滚动,当网站可滚动时,我无法正确拖动项目,因为当我尝试拖动div时,它只是滚动页面.我可以拖动它的唯一方法是当我双击该项目然后拖动它.

但这真的不是我想要的,因为使用和不自然真的很乏味.

现在的问题是,有没有办法在尝试从可拖动集中拖动其中一个项时禁用滚动.我尝试添加overflow-y: hidden点按或添加touch-action : none.不幸的是,这似乎不起作用.

总结
我所拥有的:我现在可以使用jQuery UI和jquery UI触摸打孔器通过触摸设备拖动和排序Div of List.
问题:列表将变得如此之大,以至于网站可以滚动,只需点按一下即可禁用拖动,我需要双击拖动项目.
我想要的是:即使我有滚动条,我也希望能够拖动项目(不需要双击).

我怎么能意识到这种行为/我应该从什么开始？任何提示和解决方案表示赞赏.

最后但并非最不重要的是这是我的FIDDLE.

编辑:

我正在使用:
IE 11
jQuery版本1.11.1
jQuery-ui版本1.11.4

Answer 1

尝试使用以下JS代码段和调用init()函数替换(推荐)触摸打孔库(或者除此之外)$(document).ready();:

• 请注意,您可以对样式进行注释#wrapper,它们仅用于溢出测试.
• 理想情况下,您可以从可拖动的项目中留出一些空间,以便滚动而不会产生不希望的拖动.

下面的代码段:

$(document).ready(function() {
    init();
    $("#myContainer").sortable({
        //your code
    })
});

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent({
            touchstart: "mousedown",
            touchmove: "mousemove",
            touchend: "mouseup"
        }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

--->用拨片代替触摸打孔器<---

--->小提琴片+触摸打孔器<---

(两者均在手机游戏和镀铬测试中,在第一次点击时实现拖动)

Answer 2

尝试将这些行添加到您的触摸打孔库 js 文件中。

function simulateMouseEvent(event, simulatedType) {   
// Ignore multi-touch events


> if (event.originalEvent.touches.length > 1) {
>         return;
>     }
> 
>     var touch = event.originalEvent.changedTouches[0],
>         simulatedEvent = document.createEvent('MouseEvents');
> 
>     if ($(touch.target).is("select")) {
>         event.stopPropagation();
>     } else {
>         event.preventDefault();
>     }
`

包括以上几行。