6

我有一个我正在做的小项目，并且使用 jquery 有一个有趣的包含问题draggable：

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

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

问题是，我无法按我的意愿控制拖动。在上面的小提琴中，我将 orange <span>s 放在我希望收容开始和结束的地方。

有趣的说明：我尝试做以下事情：

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

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

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

这使得底部的遏制工作，但不是顶部跨度。所以，我想我一直在使用containment: [x1,y1,x2,y2]，但还没有完全掌握如何使用它。

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

4

4 回答 4

8

包含选项允许一个数组在哪里设置包含它的位置。尝试这个：

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

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

JSFiddle 示例

于 2012-12-28T21:33:12.110 回答
5

您也可以使用 a helper:，这将允许您添加 a div，您可以动态设置可拖动操作发生之前的大小。这允许您在包含中引用它，尽管它实际上还不是页面的一部分。如果您使用start:，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:其他地方设置计算值

于 2013-09-09T12:40:09.507 回答
2

您可以将包含限制在由 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/

于 2012-12-28T21:32:30.847 回答
2

诚然，文档很薄——我必须做很多测试才能弄清楚。

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

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

于 2013-05-08T20:41:41.203 回答