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 ]

where containment:[ xLeft, yTop, xRight, yBottom ] 这样，draggable 将不会在顶部超过 50px 并且在底部低于 50px。并且保持在 9px （这将做你的垂直对齐）

小提琴：http: //jsfiddle.net/uKqta/4/

Answer 2

我建议将 draggable 替换为 resizeable ，因为它更适合您的需求。

工作示例

$(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());
    });
});

您可能还想检查一下，看起来它可能是您的下一步：
jQuery UI Resizable alsoResize reverse