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

Question

Here is a working example of a draggable image with a array containment (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/

Now I rotate the div and my containment fail (not the whole image is display and sometimes you can see the red background color).

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

How can I recalculate or transform my x1/y1/x2/y2 when I rotate my div?

possible duplicate of [Jquery containment problem with Image rotation](http://stackoverflow.com/questions/4947891/jquery-containment-problem-with-image-rotation) — Roko C. Buljan, Sep 29 '13 at 18:08
I see this post but the example work with "containment: parent" and not with the "containment: array" — sja87, Sep 29 '13 at 18:28
**My Solution:** jWindowCrop Plugin can handle it out of the box https://github.com/tybro0103/jWindowCrop — sja87, Oct 08 '13 at 13:01
yep... such a "great" plugin breaks in functionality on FF :) — Roko C. Buljan, Oct 08 '13 at 17:26
thx. zoom functionality is not supported in FF. Image Containment runs. — sja87, Oct 08 '13 at 19:06

Kenjin · Accepted Answer · 2013-10-11T13:52:24.390

Try this code:

 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 can be found here: http://jsfiddle.net/kYN3J/3/

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

1 Answers1