如果可缩放区域按比例缩小，则可拖动元素会被拖放到多个可放置区域 – 如何修复
我试图将拖放元素拖放到可放置的区域。 假设我有多个具有相同class的可drop区域，并且我已为此类编写了一个drop事件处理程序。
如果我使用-webkit-transform:scale(0.3,0.3);缩放我的可放置区域-webkit-transform:scale(0.3,0.3); ，掉落事件很奇怪。 在可拖动元素连接到其中一个可放置区域之前，下降发生在多个可放置区域上。
我认为这个问题是因为使用了scale但我对如何修复它没有任何想法。 谷歌搜索也没有帮助。
我为DEMO设置了一个小提琴。
这是我的代码
剧本
var click = { x: 0, y: 0 }; // used for recording mouse cords $('document').ready(function(event){ for(var i = 0 ; i <= 72 ; i++) { $('').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')); }) })
风格
* { 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
任何帮助将不胜感激。
编辑
这恰好是一个已知的问题与JQUERY似乎他们将不会在不久的将来修复它。 如果有人为此做过工作，那将会有很大的帮助。
找到一个解决方法，将其发布在此处以防万一它可以帮助其他任何人。
我不得不修改jquery-ui.js。
m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight};
至
m[i].proportions = { width: m[i].element[0].offsetWidth*scaleFactor, height: m[i].element[0].offsetHeight*scaleFactor };
其中scaleFactor初始化为1，并在javascript代码中更改为css-transform的值，即，如果使用-webkit-transform:scale(0.3,0.3) ，将scaleFactor设置为0.3和bingo，就完成了！
使用更改的jquery-ui.js文件更新了小提琴