Question

30

How to disable page scroll while dragging draggable in jquery?

rated 0 times [ 36] [ 6] / answers: 1 / hits: 17894 / 9 Years ago, fri, september 4, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zaynerogerb

Add To Favorites

Follow

Total Points: 454

Total Questions: 109

Total Answers: 97

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

answered 9 Years ago harleyterryp · Accepted Answer

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