7

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

我正在创建一个网站，其中有一个 div 列表，这些 div 可以使用可排序的jQuery UI在 Y 轴上进行排序。
因为我希望它在使用触摸的移动设备上运行，所以我不得不添加一些小技巧以确保 jQuery UI 可用（因为它目前不支持触摸事件。）。
该 hack 被称为 jQuery UI touch punch。
网站：jQuery UI 触摸打孔。
GitHub：jQuery UI 触摸打孔。

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

但这真的不是我想要的，因为它使用起来非常乏味且不自然。

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

总结
我所拥有的：我目前可以使用 jQuery UI 和 jquery UI 触摸打孔通过触摸设备拖动和排序 Div 列表。
问题：该列表将变得如此之大，以至于该站点是可滚动的，这会禁用单击一次的拖动我需要双击才能拖动该项目。
我想要什么：即使我有滚动条，我也希望能够拖动项目（无需双击）。

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


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

编辑：

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

4

2 回答 2

8

尝试使用以下 JS 片段替换（推荐）触摸打孔库（或除此之外）并调用init()函数 on $(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);
}

---> 用片段替换触摸打孔 <---

---> 使用片段 + 触摸打孔 <---

（均在移动 safari 和 chrome 中进行了测试，第一次点击即可实现拖动）

于 2017-01-27T13:55:29.180 回答
1

尝试将这些行添加到您的触摸打孔库 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();
>     }
`

包括以上几行。

于 2017-01-25T08:04:26.793 回答