element przeciągany można upuszczać na wiele obszarów, które można upuszczać, jeśli obszary, które można upuścić, są skalowane w dół - jak naprawić
Próbuję przeciągnąć i upuścić element i umieścić go na obszarze, który można upuścić. Powiedzmy, że mam wiele takich samych obszarów do zrzuceniaclass
a ja napisałemdrop
obsługa zdarzeń dla tegoclass
.
Jeśli zmniejszysz moje opuszczalne obszary za pomocą-webkit-transform:scale(0.3,0.3);
, zdarzenie upuszczania działa dziwnie. Kropla pojawia się na wielu strefach, z których można upuścić, zanim element przeciągalny zostanie dołączony do jednego z obszarów, które można upuścić.
Zakładam, że ten problem wynika z używaniascale
ale nie mam pojęcia, jak to naprawić. Googling też nie pomógł.
Przygotowałem skrzypcePRÓBNY.
Oto mój kod
SCENARIUSZ
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'));
})
})
STYL
*
{
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>
Każda pomoc zostanie doceniona.
EDYTOWAĆ
Tak się dziejeZNANY PROBLEM Z JQUERY i wydaje się, że nie naprawią go w najbliższej przyszłości. Jeśli ktokolwiek wykonał jakieś zadanie, będzie to bardzo pomocne.