Question

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

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

Answer 1

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

修改

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

将滑块位置设置为绝对位置（并使用top进行播放以使其位置正确）; ＆lt; - 很多工作，不要试图
只需停止更改滑块的top值

Answer 2

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

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

2 个答案:

修改