javascript - 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;  
}