javascript - How to disable page scroll while dragging draggable in jquery? - Stack Overflow

admin管理员组

文章数量:1178552

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?

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?

• javascript
• jquery
• html
• jquery-ui

Share Improve this question Follow asked Sep 4, 2015 at 10:34 Sasha GrievusSasha Grievus 2,68666 gold badges3333 silver badges6161 bronze badges 4

• 1 create a container for your draggable elements and make it overflow: auto so when you drag-drop, scroll will be remain in the container itself. – vivekkupadhyay Commented Sep 4, 2015 at 10:37
• 1 It's working perfectly, you saved the day. Thank you. If you convert the comment into a proper answer i'll accept it. – Sasha Grievus Commented Sep 4, 2015 at 10:55
• 1 improvement ... change .live to .on if you use newer jquery 1.6+ because .live is deprecated – daremachine Commented Sep 4, 2015 at 10:59
• I'm stucked with an older version of jquery, so it stays as it is for now. Thank you for the suggestion :) – Sasha Grievus Commented Sep 4, 2015 at 11:23

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 35

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

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 ;).

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();
    }
});

本文标签： javascriptHow to disable page scroll while dragging draggable in jqueryStack Overflow