javascript - jQuery Draggable div 位置错位

Question

我在这个工作示例中编写了自己的代码。

http://jsfiddle.net/uKqta/

有两个问题我需要一些指导:

1. 可拖动的 div 不应拖动到顶部并触摸边框。它应该停在顶部 div 的最小高度所在的位置。

    min-height:50px;
   

2. 可拖动的 div 实际上并没有与黄色底部的 div 粘在一起。它最初位于底部 div 的顶部。这意味着 3 个 div:顶部 div、可拖动 div 和底部 div 必须垂直对齐。

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

我换了

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

由

containment:[ 9, 50, 9, 450 ]

其中包含:[ xLeft, yTop, xRight, yBottom ]这样，draggable 不会在顶部超过 50px，在底部不会超过 50px。并保持 9px(这将进行垂直对齐)

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