Question

I wish to to use jQueryUI’s draggable widget, but constrain the object so that it is bound to the browser’s window on the top, left, and right.

But, I want to allow the object to be able to drag below the window up until there’s only 30 pixels of the object visible. At that point I’d like it to disallow dragging any further down. So, I want at least 30 pixels of the object to always be visible so it’s still easy to drag back up into view.

Is it possible to define this type on a constraint using the plugin?, If so how is it done?

Answer 1

The draggable widget has a containment option which can be used to constrain the limits in which the draggable element can be dragged. That option can take an array of values, so something like this should do the trick:

$("#example").draggable({
   containment: [0, 0, document.width, document.height - 70]
});

Here’s a working example of the above. I’ve subtracted 70 from document.height because the draggable element in the example is 100px tall.