Jquery Draggable Div Position Misplaced

I wrote my own coding as in this working example. http://jsfiddle.net/uKqta/ There are 2 problems which I need some guidance on: The draggable div should not be able to drag to th

Solution 1:

I replaced

axis:"y",
containment:"#divAll"

by

containment:[ 9, 50, 9, 450 ]

where containment:[ xLeft, yTop, xRight, yBottom ] This way, draggable will not go above 50px on top and under 50px on bottom. And while stay at 9px (this will do your vertical align)

Fiddle :http://jsfiddle.net/uKqta/4/

Solution 2:

I would recommend replacing draggable with resizeable as its a little better suited for your needs.

Working Example

$(function () {
    $("#resizable").resizable({
        handles: "n",
        maxHeight: 450,
        minHeight: 50
    });
    $("#resizable").scroll(function () { // keep the handle at the top of the resizable
        $(".ui-resizable-handle").css('top', $("#resizable").scrollTop());
    });
});

You may also want to check this out, it looks like it may be your next step: jQuery UI Resizable alsoResize reverse