Question

提前感谢您查看我的问题。

我正在创建一个网站，其中我有一个div列表，可以使用jQuery UIs排序在Y轴上排序。
因为我希望在移动设备上使用触摸运行我必须添加一点点破解以确保jQuery UI可用（因为它目前不支持触摸事件。）。黑客被称为jQuery UI touch punch。
网站：jQuery UI touch punch。
GitHub：jQuery UI touch punch。

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

但这真的不是我想要的，因为它确实如此   使用和不自然都很乏味。

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

摘要
我拥有的内容：我目前可以拖动和排序Div of List   使用触摸设备使用jQuery UI和jquery UI触摸打孔。
  问题：列表会变得很大，以至于网站可以滚动   单击即可禁用拖动，我需要双击   拖动项目。
我想要的是什么：我希望能够拖动它   项目（没有双击）即使我有一个滚动条。

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

最后但并非最不重要的是我的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);
}

<强> ---> Fiddle with snippet replacing touch punch <---

<强> ---> Fiddle with snippet + touch punch <---

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

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();
>     }
`

包括以上几行。

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

2 个答案: