How To Disable Page Scroll While Dragging Draggable In Jquery?

I have a draggable defined this way: $('#drag_area a').live('mouseup', function() { var object = $(this); var class_array = $(this).attr('class').split(' '); element(o

Solution 1:

I solved that problem with one line of css on dragging element touch-action: none;

Solution 2:

Take a look at this jsfiddle. I've made it based on this SO question: How to disable scrolling temporarily?

Here is an excerpt:

functiondisableScroll() {
    if (window.addEventListener) // older FFwindow.addEventListener('DOMMouseScroll', preventDefault, false);
    window.onwheel = preventDefault; // modern standardwindow.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IEwindow.ontouchmove = preventDefault; // mobiledocument.onkeydown = preventDefaultForScrollKeys;
}

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

Solution 3:

You'll be using all your draggable elements without any container, i.e. why when you Drag-n-Drop your elements the whole page scrolls due to dragging.

Instead of that do as:

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

set a max-height and overflow of the dragWrapper class as:

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

Now when you Drag-n-Drop your elements, instead of your body, scroll will be inside the container only.

Hope that will do the trick for you(which already did ;).