jquery draggable - 遏制

Question

我有一个小项目,我正在研究,并使用jquery有一个有趣的收容问题draggable:

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

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

问题是,我无法按照我的意愿来控制拖动.在上面的小提琴中,我把橘子<span>放在我想要收容的地方开始和结束.

有趣的说明:我尝试过以下方面的事情:

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

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

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

这使得遏制工作适用于底部,但不适用于顶部跨度.所以,我认为我已经停止使用containment: [x1,y1,x2,y2],但还没有完全掌握如何使用它.

看看小提琴,让我知道你可以想出什么来限制可拖动的运动到两个橙色跨度内.

Answer 1

所述容纳选项允许一个阵列,其中,设置的位置在哪里包含它.试试这个:

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

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

JSFiddle示例

Answer 2

您也可以使用a helper:,这将允许您添加一个div可以动态设置可拖动操作发生之前的大小.这允许您在收容中引用它,尽管它实际上并不是页面的一部分.如果你使用start:,div那么draggable函数查找包含元素时就不会出现这种情况.你可以清理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:其他位置设置计算值