How to disable page scrolling while dragging and dropping in jquery?

Question

I have a drag and drop method:

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

When I drag an element of type "drag_area a", if I scroll a page while dragging it, the element goes out of control ... This is not a given situation, so how can I avoid this? Can I turn off scrolling while dragging and dropping?

Answer 1

You will use all your draggable elements without any container, that is, when you drag-n-drop your elements, the whole page scrolls due to drag and drop.

Instead, do this:

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

a max-height overflow dragWrapper :

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

, Drag-n-Drop , , .

, ( ;).

Answer 2

jsfiddle.
SO: ?

:

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 3

I solved this problem with a single line of CSS while dragging an element touch-action: none;