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（）。左边设置（包含slideMin div）的拖动限制，在本例中为（slideMax）。

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

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部分代码。

JQueryUI Draggable - 问题设置Containment [x1，x2]值

1 个答案: