Question

I am using jquery-ui draggable. When I drag my box to beyond the bottom of the screen, the body shifts down. How can I prevent this from occurring?

Tried…

I have tried making the draggable to be containment: "*tag*" where tag is html or body.

Still trying containment, I have tried surrounding the layout with a div, however, this breaks the layout scroll-ability of LHS, RHS and center.

The problem is solved by making the body – position: static !important. This then breaks the layout.

For reference, here is the jquery-ui draggable page.

Css Layout

I have a layout which is header, fixed-height-footer, left and right fixed-width-scrollable, fluid center-scrollable. The header and footer is achievable using a large body border hack. See this question for information on the layout. How to have a 3 column layout with fixed left/right, fluid middle and fixed footer?

Reproduction of the problem.

Here is my Fiddle: http://jsfiddle.net/valamas/LrXCA/

Please click and drag the blue box below the footer to see a black band or a further pink band.

Answer 1

Pass scroll: false to your draggable constructor.

By default the auto-scroll option is set to true, if you don’t want it, you have to specify scroll: false when creating the draggable. See scroll option on the jQuery draggable page.

Working jsFiddle