El evento de caída no se activa en Chrome

92

Parece que el evento de caída no se activa cuando esperaba.

Supongo que el evento de caída se activa cuando un elemento que se está arrastrando se libera por encima del elemento de destino, pero este no parece ser el caso.

¿Qué estoy entendiendo mal?

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

Respuestas:

195

Para que el evento de caída ocurra en un elemento div, debe cancelar los eventos ondragentery ondragover. Usando jquery y su código proporcionado ...

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

Para obtener más información, consulte la página MDN .

iamchris
fuente
11
No necesita ondragenter, solo ondragover.
access_granted
1
Todavía no se puede, al menos cuando se arrastran imágenes en la última versión de Chrome.
NoBugs
2
Todavía no funciona en la última versión de Chromium (Vivaldi 1.2.490.39 () (32 bits) jsfiddle.net/f282n3pt/3
mcsdwarken
2
Con reactjs, debe agregar el controlador onDragOver al mismo elemento.
CHAN
5
¿La API de html5 dnd es tan mala?
bartosz.baczek
46

Usted puede conseguir lejos con sólo hacer una event.preventDefault()en el dragoverevento. Hacer esto disparará el dropevento.

Michael Falck Wedelgård
fuente
1
que tiene un caso de borde descubierto, también debe llamar a e.preventDefault () en dragenter, vea mi otro comentario
zupa
4

Para que se active el evento de caída, debe asignar un efecto de caída durante el evento de finalización; de lo contrario, el evento de caída nunca se activará:

$('.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.
Beto
fuente
7
En realidad, debe hacerlo event.originalEvent.dataTransfer.dropEffect = "copy"porque jQuery usa el suyo propioevent
AymKdn
0

Esta no es una respuesta real, pero para algunas personas como yo, que carecen de la disciplina para ser coherentes. La gota no se disparó para mí en cromo cuando effectAllowedel efecto no era el que me había propuesto dropEffect. Sin embargo, funcionó para mí en Safari. Esto debe establecerse como se muestra a continuación:

ev.dataTransfer.effectAllowed = 'move';

Alternativamente, effectAllowedse puede establecer como all, pero preferiría mantener la especificidad donde pueda.

para un caso en el que el efecto de caída se mueve:

ev.dataTransfer.dropEffect = 'move';

Ella es Usman
fuente