JQueryUI-如果将可拖放区域缩小，则可拖动元素将被拖放到多个可拖放区域 [英] JQueryUI - draggable element gets dropped onto multiple droppable areas if the droppable areas are scaled down
问题描述
我正在尝试将element拖放到可放置区域.假设我有多个具有相同class的可放置区域，并且为此class编写了drop事件处理程序.
如果我使用-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++)
{
$('<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'));
})
})
样式
*
{
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>
任何帮助将不胜感激.
编辑
这恰好是> 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文件更新了小提琴
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 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 workaround 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
这篇关于JQueryUI-如果将可拖放区域缩小，则可拖动元素将被拖放到多个可拖放区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
