Ниже приведен рабочий пример перетаскиваемого изображения с защитой массива (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]
});
Теперь я поворачиваю div и моя сдерживание терпит неудачу (не все изображение отображается, и иногда вы можете увидеть красный цвет фона).
Как я могу пересчитать или преобразовать мой x1/y1/x2/y2, когда я вращаю свой div?
Попробуйте этот код:
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/