ejemplo - onclick javascript

Evento de caída no disparando en cromo

Question

Parece que el evento de caída no se dispara cuando lo esperaría.

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

¿Qué estoy malinterpretando?

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

Answer 1

Para que el evento drop ocurra en un elemento div, debes cancelar los eventos ondragenter y ondragover . Usando jquery y tu código provisto ...

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

Answer 2

Para que el evento drop se active, debes asignar un dropEffect durante el evento over; de lo contrario, el evento ondrop 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.

Answer 3

Puede salirse con la suya simplemente haciendo un event.preventDefault() en el evento dragover . Hacer esto disparará el evento de drop .