座標にドラッグ可能な封じ込めを設定赤いdivの子ともドラッグdiv要素である一方で、[X1、Y1、X2、Y2]

Question

は白いdivが親コンテナです。

ドラッグ時に赤い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のエッジは、私が欲しくない白い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);