jquery draggable -容纳

Question

我有一个正在处理的小项目，并且有一个使用jquery的draggable的有趣的遏制问题

基本上，我有两个divs一个顶部&一个底部。然后，我有了第三个div，它是一个.draggable({})，可以拖动它来调整顶部和底部div的大小。

--看看这里：http://jsfiddle.net/Kpt2K/7/

问题是，我不能像我希望的那样控制拖拽。在上面的小提琴中，我把橙色的<span>s放在我希望容器开始和结束的地方。

有趣的提示:我试着做了以下几件事：

$('#container').innerWrap('<div id='containmentBox' />');

var containerHeight = $('#container').height();

$('#containmentBox').css({'height': containerHeight - 45);

这使得容器适用于底部，但不适用于顶部跨度。所以，我想我还是坚持使用containment: [x1,y1,x2,y2]，但是还没有完全掌握如何使用它。

看一下小提琴，让我知道你能想出什么来将可拖动的移动限制在两个橙色跨度内。

Answer 1

containment option允许数组设置包含它的位置。试试这个：

var containmentTop = $("#stop-top").position().top;
var containmentBottom = $("#stop-bottom").position().top;

$('#bar').draggable({axis: 'y', containment : [0,containmentTop,0,containmentBottom] });

JSFiddle example

Answer 2

您还可以使用helper:，这将允许您添加一个div，您可以动态设置可拖动操作发生之前的大小。这允许您在容器中引用它，尽管它实际上还不是页面的一部分。如果你使用start:，那么当draggable函数查找包含元素时，这个div就不存在了。您可以在stop:中进行清理

$(<<selector>>).draggable({
    helper: function (event, ui) {
        var target = $(this).clone();
        var oBody = $(document).find('body');
        var containmentDiv = $('<div id="div_containment"></div>');
        containmentDiv
            .css('top',calculatedTop)
            .css('left',calculatedLeft)
            .css('width',calculatedWidth)
            .css('height',calculatedHeight)
            .css('position','absolute');
        containmentDiv.appendTo(oBody);
            target.children('div').remove();
            target.css('background-color','#f00');
            return target;
        },
    stop: function(event, ui) {
        $(document).filter('body').find('#div_containment').remove();
    },
    containment: "#div_containment"   //containment via selector
});

您可以使用JavaScript对象引用在helper:中的其他位置设置计算值

Answer 3

您可以在由以下两个停止元素分隔的边界框中约束容器：

var top = $("#stop-top").offset().top + $("#stop-top").height();
var bottom = $("#stop-bottom").offset().top - $("#bar").height();
$('#bar').draggable({axis: 'y', containment : [0, top, 10000, bottom] });

JsFiddle：http://jsfiddle.net/Kpt2K/9/