Question

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

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

可拖动的div不能拖到顶部并触摸边框。它应该停在顶部div的最小高度的位置。
```
 min-height:50px;
```
可拖动的div实际上并没有与黄色底部div粘在一起。它最初位于底部div的顶部。这意味着3个div：top div，draggable div和bottom 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] 这样，可拖动的顶部不会高于50px，底部低于50px。并保持9px（这将进行垂直对齐）

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

Answer 2

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

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

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

jQuery Draggable div位置错位

2 个答案: