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/

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

1 个答案: