jQuery可拖动 - 限制区域

Question

我正在进行一个小项目，使用jquery的draggable时遇到了有趣的包含问题：

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

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

问题是，我无法像希望的那样包含拖动。在上面的fiddle中，我放置了橙色的<span>，表示我想要开始和结束的包含范围。

有趣的一点是：我尝试做以下事情：

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

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

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

这使得底部的约束工作正常，但顶部跨度不起作用。所以，我认为我只能使用containment: [x1,y1,x2,y2]，但还没有完全掌握如何使用它。

请查看这个Fiddle，并让我知道您能想出什么来将可拖动的移动限制在两个橙色跨度内。

- Jeff

Answer 1

containment选项允许设置一个数组，指定元素的限制位置。请尝试以下代码：

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

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

JSFiddle example

- Josep

Answer 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:中的计算值。

- Mr Tills

---

这很棒。我想拖动原始DOM对象，所以我只需使用helper: return $(this)，就完成了任务。 - SeanK

请分享一个JSFiddle的示例，因为在我的情况下它无法正常工作。谢谢。 - Kamlesh

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/

- Samuel Caillerie

---

请更新一下 jsfiddle 的示例，它目前无法正常工作。谢谢。 - Kamlesh

对我来说似乎运行良好... 这是另一个使用CSS进行了一些清除的: http://jsfiddle.net/t3x2h7f1/... - Samuel Caillerie

Answer 4

可以承认的是，文档非常薄弱 - 我不得不进行大量测试来弄清楚它。

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

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

- Jeff Young

---

这是最好的答案。值得一提的是，坐标（x1，y1，x2，y2）是指助手的偏移坐标。 - Wojtek Trelak