使用数组的jQuery draggable containment无法正常工作

Question

我有这个HTML

<div id="workflowEditor" class="workflow-editor">

    <div class="node" class="ui-widget" style="top:20px; left:40px;">
        <div class="ui-widget ui-widget-header ui-state-default">Header test</div>
        <div class="ui-widget ui-widget-content">Test Content</div>
    </div>

</div>

有了这个CSS

.workflow-editor
{
    position: relative;
    overflow: auto;
}

.workflow-editor .node
{
    position: absolute;

    min-width: 64px;
    min-height: 64px;
}

比打电话

$(".node", "#workflowEditor").draggable({
    containment: [0, 0, 500, 500]
});

但是,拖动此"节点"将允许拖动到负值; 似乎draggable是使用浏览器的视口坐标来限制边界框.有没有办法告诉坐标是否相对于可拖动的父母？

注意:父母可能会随着时间的推移改变立场.

**编辑**

可拖动物所在的表面相对于其他一些内容.就像CSS指定的那样,我需要它overflow:scroll;,所以如果拖动拖动到外面,那么将显示滚动条.父母的大小是固定的.我遇到的问题是可拖动的拖动到表面的左侧(或顶部)(因此我失去了它们).我想有一个类似于设置包含的行为"parent",但允许draggables溢出到父的右/底侧.

Answer 1

计算节点和其父的界限,请检查的jsfiddle链接 按在解释jQuery UI的

var containmentX1 = $(".node").parent().offset().left;
var containmentY1 = $(".node").parent().offset().top;
var containmentX2 =  ($(".node").parent().outerWidth() +  $(".node").parent().offset().left - $('.node').outerWidth())
var containmentY2 = ($(".node").parent().outerHeight() +  $(".node").parent().offset().top - $('.node').outerHeight()) 

$(".node").draggable({
    containment:  [containmentX1, containmentY1, containmentX2, containmentY2]
});