0

使用 [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 值的方式一定有问题，但我不确定它是什么。

有什么建议吗？

4

1 回答 1

0

想通了...我有两个 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部分的代码。

于 2012-12-03T19:46:42.127 回答