javascript - Slipp-hendelse utløses ikke i Chrome

Det ser ut til at drop-hendelsen ikke utløses når jeg ville forvente det.

Jeg antar at drop-hendelsen utløses når et element som blir dratt slippes over målelementet, men dette ser ikke ut til å være tilfelle.

Hva misforstår jeg?

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

Svar #1

For å få dropphendelsen til å oppstå på et div-element, må du avbryte ondragenter og ondragover hendelsene. Ved å bruke jQuery og koden din som er gitt...

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

For mer informasjon, sjekk ut MDN-siden.

Svar #2

Du kan slippe unna med bare å gjøre en event.preventDefault() på dragover-hendelsen. Å gjøre dette vil utløse drop-hendelsen.

Svar #3

For at drop-hendelsen skal utløses, må du tilordne en dropEffect under over-hendelsen, ellers vil ondrop-hendelsen aldri bli utlø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.

Relaterte artikler