Draggable element is deleted on several discarded areas, if decreasing areas are reduced - How to fix

Question

I am trying to drag an element and an element onto an area with the option to delete. Let's say that I have several areas resettable with the same class , and I wrote a drop event handler for this class .

If I reduce my drop areas with -webkit-transform:scale(0.3,0.3); , the drop event is acting strange. The drop occurs in multi-key drop zones before the drag element is attached to one of the areas of the drop areas.

I assume this problem is related to the use of scale , but I don't know how to fix it. Googling didn't help either.

I installed the script for DEMO .

Here is my code

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')); }) }) 

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; } 

HTML

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

Any help would be appreciated.

EDIT

This turns out to be a KNOWN ISSUE WITH JQUERY and it seems that they will not fix it in the near future. If someone works on this, it will be very helpful.

Answer 1

A workaround has been found, posting it here just in case it helps anyone else.

I had to change 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 changes in your javascript code to css-transform, i.e. if you use -webkit-transform:scale(0.3,0.3) , set scaleFactor to 0.3 and bingo, you're done!

Updated script using modified jquery-ui.js file

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