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片段替換（推薦）觸摸打孔庫（或者除此之外）並在$(document).ready();上調用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();
>     }
`

包括以上幾行。