jQuery拖动调整邻近DIV的大小

Question

请先参考这个小提琴：

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

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

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

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