jQuery UI可拖動防止移動滾動

Question

我有垂直列出全屏寬度的可拖動元素。

我正在使用名爲（jquery.ui.touch-punch）的插件來使jQuery在手機上可拖動。但問題是可拖動元素阻止用戶滾動頁面。

$('#novieList .element .content').draggable({ 
    axis: 'x', 
    revert: function() { 
     return $(this).position().left < 30; 
    }, 
    containment: [ 0, 0, 75, 0 ], 
    scope: 'element', 
    scroll: false, 
    delay: 300, 
    drag: function(event, ui) { 
     return true; 
    }, 
    start: function(event, ui) { 
     // Prevent to drag the element after open it 
     var left = $(this).position().left; 
     return left == 0; 
    }, 
    stop: function(event, ui) { 
     var left = $(this).position().left; 
     if (left != 0) { 
      $(this).offset({left: 75}); 
     } 
     return true; 
    } 
}); 

Answer 1

我發現了一個解決這個問題的Scrolling jQuery UI touch punch。您必須在第38行的jquery.ui.touch-punch.js中刪除event.preventDefault()。到目前爲止，我只測試過索尼Xperia Z1 Compact，Android 5，Chrome，但它在一個非常類似於名爲這裏。

Answer 2

我的問題是，當我的div可拖動時，我可以在移動設備上滾動，因爲Jquery UI的CSS將以下代碼設置爲none，所以通過將它們放在初始一切再次運行時恢復更改！

的.ui-拖動手柄{！-MS-觸摸動作：最初重要;觸摸動作：最初重要}

Answer 3

我不相信註釋掉event.preventDefault()在jquery.ui.touch-punch.js作品下去了。我嘗試了相同的解決方案，發現jQuery UI draggable本身阻止了垂直滾動的默認行爲 - 即使該元素設置爲僅沿着x軸拖動。

爲我工作的解決辦法是測量光標的垂直位置的變化，並使用window.scrollBy相同的量，手動滾動窗口：

var firstY = null;  
var lastY = null; 
var currentY = null; 
var vertScroll = false; 
var initAdjustment = 0; 

// record the initial position of the cursor on start of the touch 
jqDraggableItem.on("touchstart", function(event) { 
    lastY = currentY = firstY = event.originalEvent.touches[0].pageY; 
}); 

// fires whenever the cursor moves 
jqDraggableItem.on("touchmove", function(event) { 
    currentY = event.originalEvent.touches[0].pageY; 
    var adjustment = lastY-currentY; 

    // Mimic native vertical scrolling where scrolling only starts after the 
    // cursor has moved up or down from its original position by ~30 pixels. 
    if (vertScroll == false && Math.abs(currentY-firstY) > 30) { 
     vertScroll = true; 
     initAdjustment = currentY-firstY; 
    } 

    // only apply the adjustment if the user has met the threshold for vertical scrolling 
    if (vertScroll == true) { 
     window.scrollBy(0,adjustment + initAdjustment); 
     lastY = currentY + adjustment; 
    } 

}); 

// when the user lifts their finger, they will again need to meet the 
// threshold before vertical scrolling starts. 
jqDraggableItem.on("touchend", function(event) { 
    vertScroll = false; 
}); 

一個觸摸屏設備上這將密切模擬天然滾動。