設置可拖動圍堵座標[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);