jquery 可拖动 - 包含答案

【问题标题】：jquery draggable - containmentjquery 可拖动 - 包含
【发布时间】：2012-12-28 21:15:26
【问题描述】：

我正在处理一个小项目，并且使用 jquery 的draggable 遇到了一个有趣的收容问题：

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

问题是，我无法控制拖动。在上面的小提琴中，我将橙色 <span>s 放在我希望收容开始和结束的位置。

有趣的注释：我尝试做以下事情：

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

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

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

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

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

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

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

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

JSFiddle example

【讨论】：

【解决方案2】：

您也可以使用helper:，这将允许您添加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: 其他地方设置计算值

【讨论】：

这很好用。我想拖动原始的 DOM 对象，所以我只有助手：return $(this)，它完成了这项工作。
请分享 jsfiddle 的示例，因为它不适用于我的情况。谢谢。

【解决方案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/

【讨论】：

请更新 jsfiddle 示例，亲爱的，它不能正常工作。谢谢。
对我来说似乎工作得很好...这是另一个稍微清除了 CSS 的：jsfiddle.net/t3x2h7f1...

【解决方案4】：

诚然，文档很薄 - 我必须做大量测试才能弄清楚。

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

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

【讨论】：

这是最好的答案。值得一提的是，坐标 (x1,y1,x2,y2) 指的是辅助对象的偏移坐标。