Scaled div not draggable over all of parent div

Question

I'm currently working on a project using jquery-ui where I have a large div that contains several children. The idea is that these child divs will have been previously created by the user and then scaled down (to about 20% their original size) and placed in the large div wherein the user can arrange them how they like.

My issue is that after scaling, I am not able to drag the child divs to all locations within the parent. Rather, they seem to be constrained to a scaled down version of the parent even though no scaling transformation has been applied to the parent.

this fiddle illustrates the problem: http://jsfiddle.net/yRNqu/ (try to drag the blue box to the far right or bottom)

Has anyone else encountered this problem? I'd really appreciate a pointer or two.

Thanks

HTML:

<html>
    <div class="container">
        <div class="box"></div>
    </div>
</html>

CSS:

.container{
    height:500px;
    width: 500px;  
    background-color: red;

}
.box{
    height:100px;
    width: 100px;
    background-color: blue;
    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
}

jQ 1.9 + jQ UI:

$(function() {
    $('.box').draggable({
        containment: 'parent'
    });
});

Plynx Plynx · Accepted Answer · 2013-02-10T04:26:55

JQuery UI isn't smart enough to work with CSS scaling and rotation, since it relies on the reported bounding box which becomes meaningless in that context.

Here's another SO question with a bunch of workarounds to try: Dragging & Resizing CSS Transformed Elements

A few answers down you can find a plugin that purports to resolve this problem directly.

Scaled div not draggable over all of parent div

2 Answers