如何禁用頁面滾動，同時拖動jQuery中的可拖動？

我有一個可拖動的定義是這樣的：當我拖動式「drag_area一個」的項目，如果我滾動頁面的同時拖動它如何禁用頁面滾動，同時拖動jQuery中的可拖動？

$("#drag_area a").live("mouseup", function() { 

    var object = $(this); 
    var class_array = $(this).attr("class").split(" "); 
    element(object,class_array); 
    return false; 

}).draggable({ 
    containment: "#drag_area", 
    grid: [44, 44], 
    zIndex: 1000 
}).each(function(i, item){  
});

，從遏制項目退出......這不是一個渴望的情況，所以我如何避免這種情況？我可以在拖動過程中禁用頁面滾動嗎？

來源

2015-09-04 Sasha Grievus

爲您的可拖動元素創建一個*容器*並使其成爲'overflow：auto'，因此當您拖放時，滾動將保留在容器本身中。 – vivekkupadhyay

它的工作完美，你保存了一天。謝謝。如果您將評論轉換爲正確答案，我會接受。 –

改進...更改.live to .on如果您使用更新的jquery 1.6+，因爲.live已棄用 – daremachine

您將使用所有的可拖動的元素沒有任何容器，即爲什麼當你Drag-n-Drop您的元素整個頁面因拖動而滾動。

取而代之的是做如：

<div class="dragWrapper"> 
    <!-- Place all your draggable elements here --> 
</div>

設置max-height和overflow的dragWrapper類爲：

.dragWrapper { 
    max-height: 400px; 
    overflow: auto; 
}

現在，當您拖N - 下降的元素代替，你的正文，滾動只會在容器內。

希望能爲你做訣竅（已經做到了）。

來源

2015-09-04 11:01:03 vivekkupadhyay

看看這個jsfiddle。
它基於這太問題我做了：How to disable scrolling temporarily?

下面是摘錄：

function disableScroll() { 
    if (window.addEventListener) // older FF 
    window.addEventListener('DOMMouseScroll', preventDefault, false); 
    window.onwheel = preventDefault; // modern standard 
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE 
    window.ontouchmove = preventDefault; // mobile 
    document.onkeydown = preventDefaultForScrollKeys; 
} 

$("#draggable").draggable({ 
    start: function() { 
     disableScroll(); 
    } 
});

來源

2015-09-04 10:44:42 AlexArtyukh

非常感謝。最後，它似乎是一個溢出：汽車;就夠了。 –

如何禁用頁面滾動，同時拖動jQuery中的可拖動？

回答

相關問題