JQuery拖拽不工作的方式，我想

JQuery Draggable not working the way i want to

本文关键字：方式 我想 工作 JQuery      更新时间：2023-09-26

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

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

但是这并没有按照它应该的方式工作。在拖动滑块时，滑块不跟随鼠标。一定是我哪里做错了。拿不到!!:（

可以使用jQuery UI的draggable元素。然后简单地计算它与顶部的偏移量，并将其设置为顶部div的高度。然后计算出底部div的高度。

编辑

你有滑块的位置设置为relative，所以基本上它会出现在顶部div的正下方。此外，你改变它的top值(也移动它)。所以基本上它的移动量是它需要的两倍)。:

  1. 设置滑块位置为绝对(并使用top来正确定位);<——很多工作，不要尝试

  2. 简单地停止改变滑块的top值

似乎是jquery的css问题。

将分隔符的css属性改为position:absolute解决了这个问题。
相关文章：