die ziehbar Eindämmung Koordinaten Einstellung [x1, y1, x2, y2]

Question

Der weiße div ist der übergeordnete Container, während die rote div das Kind und auch die ziehbar div ist.

Jetzt möchte ich die roten div-Kanten nicht in das Eltern-Div eingeben, wenn ich es gezogen habe, also habe ich versucht, das ziehbare Containment auf x und y Koordinaten zu setzen.

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]); 

Aber ich erreiche nicht, was ich will. Die roten div-Kanten kommen immer noch in die weiße div, die ich nicht will. Bitte kann mir jemand helfen

Answer 1

Sie können ein div Element erstellen und es an den Körper anhängen, indem Sie es als Containment-Element verwenden.

//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);