JQueryUI Draggable - 设置 Containment [x1,x2] 值的问题答案

【问题标题】：JQueryUI Draggable - Issues setting Containment [x1,x2] valuesJQueryUI Draggable - 设置 Containment [x1,x2] 值的问题
【发布时间】：2012-12-02 07:25:52
【问题描述】：

在使用 [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 设置拖动包含（slideMin div），在本例中为 (slideMax)。

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

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

有什么建议吗？

【问题讨论】：

标签： jquery-ui draggable containment

【解决方案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 部分代码。

【讨论】：