Wydarzenie upuszczania nie uruchamia się w chromie

93

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?

http://jsfiddle.net/LntTL/

$('.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');
})
Łagodny Fuzz
źródło

Odpowiedzi:

201

Aby zdarzenie drop wystąpiło w elemencie div, należy anulować zdarzenia ondragenteri ondragover. 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 .

iamchris
źródło
11
Nie potrzebujesz ondragenter, tylko ondragover.
access_granted
1
Nadal nie ma sensu, przynajmniej podczas przeciągania obrazów na to w najnowszym Chrome.
NoBugs
2
Nadal nie działa na najnowszym Chromium (Vivaldi 1.2.490.39 () (32-bit) jsfiddle.net/f282n3pt/3
mcsdwarken
2
W przypadku actjs musisz dodać procedurę obsługi onDragOver do tego samego elementu.
CHAN
5
Czy API html5 dnd naprawdę jest TAKIE złe?
bartosz.baczek
47

Możesz uciec po prostu event.preventDefault()na dragoverimprezie. Spowoduje to uruchomienie dropzdarzenia.

Michael Falck Wedelgård
źródło
2
który ma odsłonięty przypadek krawędzi, musisz również wywołać e.preventDefault () na dragenter, zobacz mój drugi komentarz
zupa
5

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.
pion
źródło
8
Właściwie musisz to zrobić, event.originalEvent.dataTransfer.dropEffect = "copy"ponieważ jQuery używa własnegoevent
AymKdn,
1

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 effectAllowednie był to efekt, na który się zdecydowałem dropEffect. Jednak zadziałało to dla mnie w Safari. Należy to ustawić jak poniżej:

ev.dataTransfer.effectAllowed = 'move';

Alternatywnie effectAllowedmożna ustawić jako all, ale wolałbym zachować szczegółowość tam, gdzie mogę.

w przypadku, gdy efekt upuszczenia się porusza:

ev.dataTransfer.dropEffect = 'move';

Shees Usman
źródło