Jatuhkan acara tidak aktif di chrome

Sepertinya peristiwa penurunan tidak terpicu seperti yang saya harapkan.

Saya berasumsi bahwa peristiwa drop diaktifkan ketika elemen yang diseret dilepaskan di atas elemen target, tetapi tampaknya tidak demikian.

Apa kesalahpahaman saya?

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

Agar peristiwa penurunan terjadi pada elemen div, Anda harus membatalkan peristiwa ondragenterdan ondragover. Menggunakan jquery dan kode Anda disediakan ...

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

Untuk informasi lebih lanjut, lihat halaman MDN .

Anda bisa lolos dengan hanya melakukan event.preventDefault()pada dragoveracara. Melakukan ini akan menghentikan dropacara.

Agar peristiwa drop diaktifkan, Anda perlu menetapkan dropEffect selama over event, jika tidak, peristiwa ondrop tidak akan pernah dipicu:

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

Ini bukanlah jawaban yang sebenarnya tetapi untuk beberapa orang seperti saya yang kurang disiplin untuk konsistensi. Drop tidak bekerja untuk saya di chrome ketika effectAllowedbukankah efek yang saya atur dropEffect. Namun itu berhasil untuk saya di Safari. Ini harus diatur seperti di bawah ini:

ev.dataTransfer.effectAllowed = 'move';

Atau, effectAlloweddapat ditetapkan sebagai all, tetapi saya lebih suka mempertahankan kekhususan di mana saya bisa.

untuk kasus ketika efek jatuh bergerak:

ev.dataTransfer.dropEffect = 'move';