How to disable page scroll while dragging draggable in jquery?
Solution 1
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:
<div class="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 ;).
Solution 2
I solved that problem with one line of css on dragging element touch-action: none;
Solution 3
Take a look at this jsfiddle.
I've made it based on this SO question: How to disable scrolling temporarily?
Here is an excerpt:
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();
}
});
Sasha Grievus
Updated on June 09, 2022Comments
-
Sasha Grievus almost 2 years
I have a draggable defined this way:
$("#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 item of the type 'drag_area a', if i scroll the page while dragging it, the item exits from containment... It is not a desidered situation, so how can i avoid this? Can i disable page scrolling during dragging?
-
Sasha Grievus over 8 yearsThank you very much. In the end, it seemed an overflow:auto; was enough.
-
Adrian Bartholomew over 5 yearsPlease tell me you didn't use "i.e." for "that is". Edit that immediately in this holy grail of all that is SO good
-
AJ7 over 3 yearsAmazing solution. Works like a charm. Thanks!