Question

我有这样定义的拖拽：

$("#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){    
});

当我拖动类型＆＃39; drag_area a＆＃39;的项目时，如果我在拖动页面时滚动页面，该项目会从包含中退出...这不是一个需要的情况，所以我怎么能避免这个？我可以在拖动过程中禁用页面滚动吗？

Answer 1

看一下这个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();
    }
});

Answer 2

您将使用所有可拖动的元素，而不使用任何容器，即为什么当您拖放元素时，整个页面会因拖动而滚动

而不是那样做：

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

将max-height类的overflow和dragWrapper设置为：

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

现在当你拖放你的元素而不是 body 时，滚动只会在容器内。

希望能为你做到这一点（已经做过了）。

Answer 3

我通过在元素touch-action: none;上拖动一行CSS来解决了这个问题

如何在jquery中拖动draggable时禁用页面滚动？

3 个答案: