Javascript JQuery Draggable无法按我希望的方式工作

我有两个水平分割，我想在中间插入一个滑块，这样可以动态调整高度。我使用的代码是

<script type="text/javascript">
$(function() {
var stopFromTop = 58;
var stopToTop = 158;
var i = 0;
$("#handle").draggable({ axis: 'y', 
        start: function(event, ui) {
            TopStart = $('#top').height();
            BottomStart = $('#bottom').height();
        },
        drag: function(event, ui) {
            $('#top').height( TopStart + (ui.position.top-ui.originalPosition.top) );
            $('#bottom').height( BottomStart - (ui.position.top-ui.originalPosition.top) );
            //$("#handle").css({"top":108 + "px" }).show();
            //alert(ui.position.top);
        },
        containment: [0,stopFromTop ,0,stopToTop ]

});

});
</script>

$（函数（）{
var stopFromTop=58；
var stopToTop=158；
var i=0；
$（“#句柄”）.draggable（{axis:'y'，
开始：功能（事件、用户界面）{
TopStart=$（'#top'）。高度（）；
BottomStart=$（'#bottom'）.height（）；
},
拖动：函数（事件、ui）{
$（'#top'）.height（TopStart+（ui.position.top-ui.originalPosition.top））；
$（'#bottom'）.height（BottomStart-（ui.position.top-ui.originalPosition.top））；
//$（“#handle”）.css（{“top”：108+“px”}）.show（）；
//警报（ui.position.top）；
},
安全壳：[0，stopFromTop，0，stopToTop]
});
});

但这并不是它应该做的。拖动鼠标时，滑块未跟随鼠标。一定是我做错了什么事。无法获取它！！：( 以下是。

您可以使用jQuery UI。然后只需计算它与顶部的偏移量，并将其设置为顶部div的高度。然后进行一些数学运算以找到底部div的高度

编辑 您将滑块的位置设置为

相对

，因此它基本上会显示在顶部div的正下方。此外，您还可以更改其

顶部

值（该值也会移动它。因此它的移动量基本上是需要的两倍）。或者：

将滑块位置设置为绝对位置（并使用

top

将其向右定位）；您可以使用jQuery UI。然后只需计算它与顶部的偏移量，并将其设置为顶部div的高度。然后进行一些数学运算，以找到底部div的高度

编辑 您将滑块的位置设置为

相对

，因此它基本上会显示在顶部div的正下方。此外，您还可以更改其

顶部

值（该值也会移动它。因此它的移动量基本上是需要的两倍）。或者：

---

将滑块位置设置为绝对位置（并使用

top

将其置于右侧）似乎是jquery的css问题。将separator的css属性更改为position:absolute解决了这个问题。

似乎是jquery的css问题。将separator的css属性更改为position:absolute解决了这个问题。

注意链接到页面或注意链接到页面或做数学matics工作正常。顶部和底部div的高度也在相应地变化。检查示例。只是分隔符没有跟随鼠标。分隔符突然移动。数学工作正常。顶部和底部div的高度也在相应地变化。检查示例。只是分隔符没有跟随鼠标。S分离器突然移动。