Custom containing a jQueryUI draggable
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 obje开发者_StackOverflowct 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?
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.
精彩评论