jQuery 拖动调整相邻 DIV 的大小

Question

请先参考这个小提琴：

http://jsfiddle.net/QhVNr/121/

我正在编写一个代码，使用户能够拖动中间的 div [小提琴中的白色。] 我最初想要的是向上拖动白色部分会使绿色div的高度降低，而蓝色div的高度会增加。

但它最终就像在示例中一样，可拖动的白色 div 就像失去控制一样，只是快速向上/向下闪电并越过父包装。 您可以尝试通过在 javascript 中注释掉这两行来编辑代码

$('#draggable_0').height(div1H);
$('#draggable_2').height(div3H);

那么拖动函数就像正常的一样，将被包含在它的父级中。

请问如何解决这个问题？ 使拖动以及绿色和蓝色 div 表现正常。

谢谢。

Answer 1

.draggable 的位置是relative

所以当您修改#draggable_0 的高度时，.draggable 的位置将相对于#draggable_0。

改变css：

.draggable  
{  
    height:20px;  
    width:130px;  
    cursor:pointer;  
    border:1px solid #000000;  
    background-color:#ffffff;  
    position:absolute;  
}