Drop-Ereignis wird nicht in Chrom ausgelöst

91

Es scheint, dass das Drop-Ereignis nicht ausgelöst wird, wenn ich es erwarten würde.

Ich gehe davon aus, dass das Drop-Ereignis ausgelöst wird, wenn ein Element, das gezogen wird, über dem Zielelement freigegeben wird, aber dies scheint nicht der Fall zu sein.

Was missverstehe ich?

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');
})
javascript jquery events drag-and-drop jquery-events Milder Flaum
quelle
doppelte Frage: stackoverflow.com/questions/19223352/jquery-ondrop-not-firing/…
Bob
mögliche Antwort: stackoverflow.com/questions/8414154/…
Bob

Antworten:

191

Damit das Drop-Ereignis für ein div-Element auftritt, müssen Sie die Ereignisse ondragenterund abbrechen ondragover. Verwenden Sie jquery und Ihren Code ...

$('.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();
})

Weitere Informationen finden Sie auf der MDN-Seite .

iamchris
quelle
11
Sie brauchen kein Ondragenter, nur Ondragover.
access_granted
1
Immer noch ein No-Go, zumindest wenn Sie Bilder auf das neueste Chrome ziehen.
NoBugs
2
Funktioniert immer noch nicht mit dem neuesten Chromium (Vivaldi 1.2.490.39 () (32-Bit) jsfiddle.net/f282n3pt/3
mcsdwarken
2
Bei reactjs müssen Sie dem gleichen Element den onDragOver-Handler hinzufügen.
CHAN
5
Ist HTML5 und API wirklich so schlecht?
Bartosz.baczek
45

Sie können mit nur tun , eine weg event.preventDefault()auf der dragoverVeranstaltung. Dadurch wird das dropEreignis ausgelöst.

Michael Falck Wedelgård
quelle
1
das hat einen unbedeckten Randfall, müssen Sie e.preventDefault () auch auf Dragenter aufrufen, siehe meinen anderen Kommentar
zupa
4

Damit das Drop-Ereignis ausgelöst wird, müssen Sie während des Over-Ereignisses einen dropEffect zuweisen. Andernfalls wird das Ondrop-Ereignis niemals ausgelöst:

$('.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.
Bob
quelle
7
Eigentlich müssen Sie tun, event.originalEvent.dataTransfer.dropEffect = "copy"weil jQuery seine eigenen verwendetevent
AymKdn
0

Dies ist keine wirkliche Antwort, aber für einige Leute wie mich, denen die Disziplin für Beständigkeit fehlt. Drop hat für mich nicht in Chrom effectAllowedgeschossen, als das nicht der Effekt war, den ich eingestellt hatte dropEffect. Bei Safari hat es jedoch bei mir funktioniert. Dies sollte wie folgt eingestellt werden:

ev.dataTransfer.effectAllowed = 'move';

Alternativ effectAllowedkann als festgelegt werden all, aber ich würde es vorziehen, die Spezifität zu behalten, wo ich kann.

für einen Fall, in dem der Drop-Effekt verschoben wird:

ev.dataTransfer.dropEffect = 'move';

Shees Usman
quelle