Как я могу установить содержание массива пользовательского интерфейса запроса на повернутый элемент

0

Ниже приведен рабочий пример перетаскиваемого изображения с защитой массива (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/

Как я могу пересчитать или преобразовать мой x1/y1/x2/y2, когда я вращаю свой div?

1 ответ

0
Лучший ответ

Попробуйте этот код:

 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/

  • 0
    хороший кусок кода!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню