Wygląda na to, że upuszczenie nie uruchamia się, gdy bym się spodziewał.
Zakładam, że zdarzenie upuszczania jest uruchamiane, gdy przeciągany element zostanie zwolniony powyżej elementu docelowego, ale wydaje się, że tak nie jest.
Co ja nie rozumiem?
$('.drop').on('drop dragdrop',function(){
alert('dropped');
});
$('.drop').on('dragenter',function(){
$(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
$(this).html('drop here').css('background','red');
})
javascript
jquery
events
drag-and-drop
jquery-events
Łagodny Fuzz
źródło
źródło
Odpowiedzi:
Aby zdarzenie drop wystąpiło w elemencie div, należy anulować zdarzenia
ondragenter
iondragover
. Używając jquery i dostarczonego kodu ...$('.drop').on('drop dragdrop',function(){ alert('dropped'); }); $('.drop').on('dragenter',function(event){ event.preventDefault(); $(this).html('drop now').css('background','blue'); }) $('.drop').on('dragleave',function(){ $(this).html('drop here').css('background','red'); }) $('.drop').on('dragover',function(event){ event.preventDefault(); })
Aby uzyskać więcej informacji, odwiedź stronę MDN .
źródło
Możesz uciec po prostu
event.preventDefault()
nadragover
imprezie. Spowoduje to uruchomieniedrop
zdarzenia.źródło
Aby zdarzenie drop zostało uruchomione, musisz przypisać efekt dropEffect podczas zdarzenia over, w przeciwnym razie zdarzenie ondrop nigdy nie zostanie wyzwolone:
$('.drop').on('dragover',function(event){ event.preventDefault(); event.dataTransfer.dropEffect = 'copy'; // required to enable drop on DIV }) // Value for dropEffect can be one of: move, copy, link or none // The mouse icon + behavior will change accordingly.
źródło
event.originalEvent.dataTransfer.dropEffect = "copy"
ponieważ jQuery używa własnegoevent
To nie jest właściwa odpowiedź, ale dla niektórych ludzi, takich jak ja, którym brakuje dyscypliny do konsekwencji. Drop nie odpalił dla mnie w chromie, gdy
effectAllowed
nie był to efekt, na który się zdecydowałemdropEffect
. Jednak zadziałało to dla mnie w Safari. Należy to ustawić jak poniżej:ev.dataTransfer.effectAllowed = 'move';
Alternatywnie
effectAllowed
można ustawić jakoall
, ale wolałbym zachować szczegółowość tam, gdzie mogę.w przypadku, gdy efekt upuszczenia się porusza:
ev.dataTransfer.dropEffect = 'move';
źródło