jQuery draggable containment using array is not working as expected

Question

I have this piece of 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>

With this CSS

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

.workflow-editor .node
{
    position: absolute;

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

Than calling

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

However, dragging this "node" will allow dragging into negative values; it seems that draggable is using the browser's viewport coordinate to limit the bounding box. Is there some way to tell that the coordinates are relative to the draggable's parent?

Note: the parent may change position over time.

** Edit **

the surface where the draggables are located is relative to some other content. Like the CSS specifies, I need it to be overflow:scroll;, so if the draggables are dragged outside, then the scrollbars will be displayed. The parent's size is fixed. The problem I'm having is that the draggables can be dragged to the left (or top) of the surface (thus I lose them). I'd like to have a similar behaviour as setting the containment to "parent", but allowing draggables to overflow unto the right/bottom sides of the parent.

Answer 1

calculating the boundaries of the node and its parent, please check the jsFiddle Link as per the explanations at 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]
});