jQuery Draggable div Position misplaced

Question

I wrote my own coding as in this working example.

http://jsfiddle.net/uKqta/

There are 2 problems which I need some guidance on:

1. The draggable div should not be able to drag to the top and touch the border. It should just stop at the point where the top div's minimum height is.

    min-height:50px;
   

2. The draggable div is actually not stuck together with the yellow bottom div. It is originally located on top of the bottom div. Which means 3 divs: top div, draggable div and bottom div must be aligned vertically.

JS:

$(function () {
    $("#draggable").draggable({
        drag: function () {
            var position = $("#draggable").position();
            var topPos = position.top;
            var divHeight = 500;
            var div1H = topPos;
            var div3H = divHeight - topPos;
            $('#div1').height(div1H);
            $('#div3').height(div3H);
        },
        axis: "y",
        containment: "#divAll"
    });
});

HTML:

<div id="divAll">
    <div id="div1">
        <table id="tbl1">
            <tr>
                <td>top top top</td>
            </tr>
        </table>
    </div>
    <div id="draggable" class="handler_horizontal"></div>
    <div id="div3">
        <table id="tbl2">
            <tr>
                <td>bottom bottom bottom</td>
            </tr>
        </table>
    </div>
</div>

CSS:

#divAll {
    height:500px;
    width:500px;
    border:1px solid blue;
    position: relative;
}
.handler_horizontal {
    width:100%;
    height: 8px;
    cursor: row-resize;
    left: 0;
    background: url(http://jsfiddle.net/img/handle-h.png) 50% 3px no-repeat;
    border:1px solid grey;
    margin-bottom:50px;
    position:absolute;
}
#div1 {
    height:60%;
    width:100%;
    border:1px dotted green;
    overflow:auto;
    min-height:50px;
    max-height:450px;
    background-color: #eee;
}
#div3 {
    width:100%;
    height:37%;
    border:1px dotted red;
    overflow:auto;
    min-height:50px;
    max-height:450px;
    background-color: yellow;
}
#tbl1, #tbl2 {
    word-wrap:break-word;
}

Answer 1

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

Answer 2

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/