jquery draggable - containment

Question

I have a little project I'm working on, and have an interesting containment issue using jquery's draggable:

Basically, I have two divs - a top & and a bottom. Then, I have a third div that is a .draggable({}) and can be dragged in order to resize the top and bottom div.

-- have a look here: http://jsfiddle.net/Kpt2K/7/

The issue is, I'm not able to contain the dragging as I would like. In the fiddle above, I put orange <span>s where I'd like the containment to begin and end.

Interesting note: I tried doing something of the following:

$('#container').innerWrap('<div id='containmentBox' />');

var containerHeight = $('#container').height();

$('#containmentBox').css({'height': containerHeight - 45);

this made the containment work for the bottom, but not the top span. So, I think I'm stuck using containment: [x1,y1,x2,y2], but haven't quite grasped how to use it.

Take a look at the fiddle, and let me know what you can come up with to constrain the draggable movement to inside the two orange spans.

Answer 1

The containment option allows an array where to set the positions where to contain it. Try this:

var containmentTop = $("#stop-top").position().top;
var containmentBottom = $("#stop-bottom").position().top;

$('#bar').draggable({axis: 'y', containment : [0,containmentTop,0,containmentBottom] });

JSFiddle example