перетаскиваемый элемент сбрасывается на несколько областей сбрасывания, если области сбрасывания уменьшены - как это исправить
Я пытаюсь перетащить и элемент на выпадающую область. Допустим, у меня есть несколько областей сбрасывания с одинаковымиclass
и я написалdrop
обработчик событий для этогоclass
.
Если я уменьшу мои области с помощью-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 и кажется, что они не будут исправлять это в ближайшем будущем. Если кто-то обошел это, это очень поможет.