JQueryUI - draggable element gets dropped onto multiple droppable areas if the droppable areas are scaled down

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 d

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/