Question

我正在开展一个小项目，并使用jquery的draggable来解决一个有趣的问题：

基本上，我有两个div - top＆amp;和一个底部。然后，我有一个第三个div，它是一个.draggable（{}），可以拖动以调整顶部和底部div的大小。

问题是，我无法按照我的意愿来控制拖动。在上面的小提琴中，我将橙色<span>放在我想要收容的地方开始和结束。

有趣的说明：我尝试过以下方法：

$('#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:，则此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:其他地方设置计算值

Answer 3

您可以限制由2个停止元素分隔的边界框中的包含：

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/

Answer 4

不可否认，文档很薄 - 我不得不做很多测试来弄明白。

我的错误在于认为包含数组定义了可拖动元素可以移动的边界，定义为[x，y，width，height]，但我发现包含数组定义了左上角和下限定义边界定义为[x1，y1，x2，y2]的右边点，包含的元素原点可以在其中移动。

这是有意义的，因为最后两个数组元素被定义为x2和y2（点属性），而不是w和h（矩形属性），但是文档应该更具体地说明这些参数在上下文中的含义包含的元素，以及在什么上下文中（对于包含的元素的原点）和坐标系（包含的元素）。

jquery draggable - 遏制

4 个答案: