JQueryUI 可拖动 - 设置包含 [x1，x2] 值的问题

Question

在使用 [x1，y1，x2，y2] 格式时，我在设置 jqueryUI 可拖动函数的包含值时遇到问题。 这是 js：

<script type="text/javascript">
    //slideTest.js
    $(document).ready(function(){
        $('.slideMin').each(function(){
            $(this).draggable({
                containment: [$(this).parent().offset().left,$(this).parent().offset().top,$(this).next('div').offset().left,$(this).parent().offset().top]
            });
        });
</script>

以及脚本与之交互的 html：

<div class="slideBar">
    <div class="slideMin"></div>
    <div class="slideMax"></div>
</div>

我正在尝试根据下一个div 的 offset（）.left 设置拖动包含（slideMindiv），在本例中为 （slideMax）。

换句话说，我希望可拖动行为在到达下一个（slideMax）div的左侧时停止（对于slideMindiv）。

x1 似乎正在工作，因为阻力停止在定义的位置，但是，它重叠并延伸到下一个div 之外，我不希望发生这种情况。 我设置 x2 值的方式一定有问题，但我不确定它是什么。

有什么建议吗？

Answer 1

想

通了...我有两个div，都是可拖动的。 第一个div 是在到达下一个div 时停止。 上面的代码完成了此操作，直到我要拖动任一div：一旦拖动了其中一个div，另一个div 的可拖动范围就不会更新，因此，我收到了可拖动范围与另一个div 重叠的错误。 为了修复它，我必须重新启动并设置正在移动的div 的可拖动函数中另一个div 的可拖动范围。

新代码如下所示：

$(this).draggable({
    containment: [$(this).position().left, $(this).position().top, $(this).next().position().left - $(this).width()+4, $(this).position().top],
    drag: function(e){
        $(this).next().draggable({
            containment: [parseFloat($(this).position().left) + parseFloat($(this).width())-4, $(this).next().position().top, parseFloat($(this).parent().position().left) + parseFloat($(this).parent().width())-3, $(this).next().position().top]
        });
    }
});
$(this).draggable({
    containment: [parseFloat($(this).prev().position().left) + parseFloat($(this).prev().width())-4, $(this).position().top, $(this).position().left, $(this).position().top],
    drag: function(e){
        $(this).prev().draggable({
            containment: [$(this).parent().offset().left-$(this).prev().width()+5, $(this).prev().position().top, $(this).position().left - $(this).prev().width()+4, $(this).prev().position().top]
        });
    }
});

PS，数字 -3 -4 +5 等是为了在我的可拖动div（4px 手柄）上为手柄添加间距，如果您没有手柄，则不需要额外的 -3 -4 +5 部分代码。