设置可拖动围堵坐标[X1，Y1，X2，Y2]

Question

白格是父容器而红股利是孩子，也可拖动DIV。

现在我不想让红色边缘在拖动时进入父div，所以我试图将可拖动的容器设置为x和y坐标。

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

但是我没有达到我想要的。红色的边缘仍然进入我不想要的白色的div。请有人可以帮助我

Answer 1

您可以创建一个div元素并将其作为包含元素附加到主体。

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