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

How can I set a query UI array containment on a rotated element

本文关键字：查询 UI 数组 包含 设置 旋转 元素      更新时间：2023-09-26

这是一个带有数组包含（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

？

试试这段代码：

 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/

相关文章：