Jatuhkan acara tidak aktif di chrome

93

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

— Bulu halus ringan
sumber

pertanyaan ganda: stackoverflow.com/questions/19223352/jquery-ondrop-not-firing/…

— bob

jawaban potensial: stackoverflow.com/questions/8414154/…

— bob

201

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 .

— iamchris
sumber

11

Anda tidak perlu ondragenter, hanya ondragover.

— access_granted

1

Masih tidak bisa digunakan, setidaknya saat menyeret gambar ke itu di Chrome terbaru.

— NoBugs

2

Masih tidak berfungsi pada Chromium terbaru (Vivaldi 1.2.490.39 () (32-bit) jsfiddle.net/f282n3pt/3

— mcsdwarken

2

Dengan reactjs, Anda perlu menambahkan pengendali onDragOver ke elem yang sama.

— CHAN

5

Apakah html5 dnd API benar-benar buruk?

— bartosz.baczek

47

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

— Michael Falck Wedelgård
sumber

2

yang memiliki case edge yang tidak tertutup, Anda harus memanggil e.preventDefault () pada dragenter juga, lihat komentar saya yang lain

— zupa

5

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.

— bob
sumber

8

Sebenarnya Anda perlu melakukannya event.originalEvent.dataTransfer.dropEffect = "copy"karena jQuery menggunakan miliknya sendirievent

— AymKdn

1

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

— Shees Usman
sumber