draggable element gets dropped onto multiple droppable areas if the droppable areas are scaled down - How to fix

Question

I am trying to drag and drop and element onto a droppable area. Let's say that I have multiple droppable areas with the same class and I have written a drop event handler for this class.

If I scale down my droppable areas using -webkit-transform:scale(0.3,0.3); , the drop event acts weird. The drop happens onto muliple droppable zones before the draggable element gets attached to one of the droppable areas.

I assume that this issue is because of using the scale but I don't have any idea on how to fix it. Googling didn't help either.

I have set up a fiddle for DEMO.

Here is my code

THE SCRIPT

var click = {
    x: 0,
    y: 0
}; // used for recording mouse cords

$('document').ready(function(event){
    for(var i = 0 ; i <= 72 ; i++)
    {
        $('<div></div>').attr({'class':'drop_zone','id':'drop_'+i}).appendTo($('.main_container'));
    }
    $('.drop_zone').each(function(index,element){
        $(this).attr('id','drop_'+index);
    })
    $('.draggable').draggable();
    $('.draggable').on('dragstart',function(event,ui){
        $('#droppable_area_ids').html('');
        click.x = event.clientX;
        click.y = event.clientY;
    })
    $('.draggable').on('drag',function(event,ui){
        var zoom = 0.3;
        var original = ui.originalPosition;

        ui.position = {
            left: (event.clientX - click.x + original.left) / zoom,
            top:  (event.clientY - click.y + original.top ) / zoom
        };
    })
    $('.draggable').on('dragend',function(event,ui){
        click.x = 0;
        click.y = 0;
    })
    $('.drop_zone').droppable({
        tolerance: 'pointer',
        accept: ".draggable"
    });
    $('.drop_zone').on('drop',function(event,ui){
        console.log('dropped on ' + $(this).attr('id'));
        $('.draggable').css({'position':'absolute','top':'0px','left':'0px'}).appendTo($(this));
        $(this).parent().css('z-index',10);
        $('#droppable_area_ids').html($('#droppable_area_ids').html() + ' , ' + $(this).attr('id'));
    })
})

THE STYLE

*
{
    padding:0px;
    margin: 0px;
}
.main_container
{
    -webkit-transform: scale(0.3,0.3);
    width: 1000px;
    height: 1000px;
    background-color: #efefef;
    position: absolute;
    top: -200px;
    left: -220px;
}
.drop_zone
{
    background-color: #7e7e7e;
    width:100px;
    height:100px;
    position: relative;
    margin-left: 10px;
    margin-top: 10px;
    float: left;
}
.draggable
{
    background-color: #262626;
    width:100px;
    height: 200px;
    z-index: 100;
}
#droppable_area_ids
{
    position: absolute;
    top:100px;
    left:100px;
    width:100%;
    float:left;
}

THE HTML

<div class="main_container">
    <div class="draggable"></div> 
</div>
<div id="droppable_area_ids"></div>

Any help will be appreciated.

EDIT

This happens to be a KNOWN ISSUE WITH JQUERY and seems that they won't be fixing it in the near future. If anybody has done a work around for this , it'll be of great help.

Answer 1

Found a workaround , posting it here just in case it helps anyone else.

I had to modify jquery-ui.js.

m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight};

to

m[i].proportions = { width: m[i].element[0].offsetWidth*scaleFactor, height: m[i].element[0].offsetHeight*scaleFactor };

where scaleFactor is initialized to 1 and is changed in your javascript code to the value of css-transform , i.e., If you use -webkit-transform:scale(0.3,0.3) , set the scaleFactor to 0.3 and bingo , you are done!

Updated fiddle using the changed jquery-ui.js file

http://jsfiddle.net/P4FMr/4/