javascript - 如何在旋转元素上设置查询 UI 数组包含

Question

这是一个带有数组包含（jquery UI）的可拖动图像的工作示例。

offsetLeft = $('#outerdiv').offset().left;
offsetTop = $('#outerdiv').offset().top;
blockWidth = $('#outerdiv').width();
blockHeight = $('#outerdiv').height();
imgWidth = $('#imgdrag').width();
imgHeight = $('#imgdrag').height();

x1 = offsetLeft + blockWidth - imgWidth;
y1 = offsetTop + blockHeight - imgHeight;
x2 = offsetLeft;
y2 = offsetTop;

$('#imgdrag').draggable({
    containment: [x1,y1,x2,y2]
});

http://jsfiddle.net/yryFZ/8/

现在我旋转 div 并且我的遏制失败（不是整个图像都显示，有时你可以看到红色背景颜色）。

http://jsfiddle.net/yryFZ/21/

旋转 div 时如何重新计算或转换 x1/y1/x2/y2？

Answer 1

试试这个代码：

 blockWidth = $('#outerdiv').width();
 blockHeight = $('#outerdiv').height();
 imgWidth = $('#imgdrag').width();
 imgHeight = $('#imgdrag').height();
 leftBounder = ui.position.left;
 topBounder = ui.position.top;
 rightBounder = blockWidth - imgWidth;
 bottomBounder = blockHeight - imgHeight;

 if(ui.position.top > 0) { ui.position.top = 0; }
 if(ui.position.left > 0) { ui.position.left = 0; }   
 if(topBounder < bottomBounder) { ui.position.top = bottomBounder; }
 if(leftBounder < rightBounder) { ui.position.left = rightBounder; }

JSFiddle 可以在这里找到：http: //jsfiddle.net/kYN3J/3/