Setting the draggable containment to coordinates [x1, y1, x2, y2]

The white div is the parent container while the red div is the child and also the draggable div.

Now I don't want the red div edges to enter the parent div when dragged so I tried to set the draggable containment to x and y coordinates.

parDivLeft = $('div#parent').offset().left;
parDivTop = $('div#parent').offset().top;
parDivWid = $('div#parent').width();
parDivHei = $('div#parent'). height();
dragDivW = $('div#drag').width();
dragDivH = $('div#drag').height();
coorX = dragDivW - parDivWid;
coorY = dragDivH - parDivHei;
x1 = parDivLeft - coorX;
x2 = parDivLeft + parDivWid + coorX;
x1 = parDivTop - coorY;
x2 = parDivTop + parDivHei + coorY;

$('div#drag').draggable({containment:[x1,y1,x2,y2]);

But am not achieving what I want. The red div edges still come into the white div which I don't want. Please can someone help me out

You can create a div element and append it to the body using it as the containment element.

//Using values from your code
newDivH = x2 - x1;
newDivW = y2 - y1;
$newDiv = $('<div>').css({
    position:'absolute',
    left:y1+'px',
    top:x1+'px',
    width: newDivW+'px',
    height: newDivH+'px',
    zIndex:-5
})
$('body').append($newDiv);
$('div#drag').draggable({containment:$newDiv);