Drop-Ereignis wird nicht in Chrom ausgelöst

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

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 .

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

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.

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';