将可拖动容器设置为坐标 [x1, y1, x2, y2]答案

【问题标题】：Setting the draggable containment to coordinates [x1, y1, x2, y2]将可拖动容器设置为坐标 [x1, y1, x2, y2]
【发布时间】：2017-05-04 13:17:23
【问题描述】：

白色 div 是父容器，红色 div 是子容器，也是可拖动的 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。请问有人可以帮我吗

【问题讨论】：

标签： coordinates draggable jquery-ui-draggable containment

【解决方案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);

【讨论】：