如果可缩放区域按比例缩小，可拖放元素会被放置到多个可放置区域 - 如何修复 [英] draggable element gets dropped onto multiple droppable areas if the droppable areas are scaled down - How to fix
问题描述
我试图将元素拖放到可放置区域。让我们说，我有多个可放置区域与相同的类，我已经写了一个 drop 事件处理程序为<$如果我使用 -webkit-transform：scale（0.3）来缩小我的可放置区域，请使用。
< ，0.3）; ，drop事件很奇怪。
我假设这个问题是因为使用了 scale 但我不知道如何解决它。
我为 DEMO 。
以下是我的代码
脚本
var click = {
x：0，
y：0
}; //用于记录鼠标线
$（'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'）每个（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（'drop 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'））;
}）
}）
$ b b
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;
}
HTML
< div class =main_container>
< div class =draggable>< / div>
< / div>
< div id =droppable_area_ids>< / div>
任何帮助将不胜感激。
EDIT
这恰好是 KNOWN ISSUE WITH JQUERY ，似乎他们不会在不久的将来修复它。
找到一个解决方法，发布在这里
我必须修改jquery-ui.js。
m [i] .proportions = {width：m [i] .element [0] .offsetWidth，height：m [i] .element [0] .offsetHeight}; p>
到
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文件更新了小提琴
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.
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
这篇关于如果可缩放区域按比例缩小，可拖放元素会被放置到多个可放置区域 - 如何修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
