如何禁用页面滚动，同时拖动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中的可拖动？

回答

相关问题