この作業例のように、独自のコーディングを作成しました。
いくつかのガイダンスが必要な 2 つの問題があります。
ドラッグ可能な div は、上部にドラッグして境界線に触れることができないようにする必要があります。一番上の div の最小の高さのポイントで停止する必要があります。
min-height:50px;ドラッグ可能な 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;
}