JQuery Draggable不按我想要的方式工作

时间:2011-12-18 20:06:37

标签: javascript jquery jquery-ui

我有两个水平分区,我想在它们之间插入一个滑块,以便可以动态调整高度。我正在使用的代码是

<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>

但这不是应该的方式。拖动时滑块不跟随鼠标。肯定有一些我做错了。无法得到它! :( 这是link to the page

2 个答案:

答案 0 :(得分:1)

您可以使用jQuery UI的draggable element。然后简单地从顶部计算它的偏移量并将其设置为顶部div的高度。然后做一些数学运算来找到底部div的高度。

修改

您将滑块的位置设置为relative,因此它基本上会显示在顶部div的正下方。另外,你改变它的top值(它也移动它。所以基本上它正在移动TWICE尽可能多)。之一:

  1. 将滑块位置设置为绝对位置(并使用top进行播放以使其位置正确); &lt; - 很多工作,不要试图

  2. 只需停止更改滑块的top

答案 1 :(得分:0)

似乎是jquery的css问题。将分隔符的css属性更改为position:absolute修复了问题。