Penjelasan terperinci tentang acara drag and drop di html5 (seret dan lepas)

Internet Explorer 9, Firefox, Opera 12, Chrome, dan Safari 5 Dukungan Drag and Drop.

 <! JavaScript> Function Alldrop (EV) {EV.PreventDefault ();} Function Drag (EV) {EV.DataTransfer.setData (Text, EV.Target.ID); EV.DataTransfer.GetData (Teks); = drop (event) oncragover = alluprop (event)> div> <br/> <img id = drag1 src = http: //www.aseoe.com/statics/images /eoe/logo.png draggable = true onsdragStart = drag = (Acara)/> </body> </html>

Pertama -tama, untuk membuat elemen diseret, atur properti yang dapat diseret ke true:

Kemudian ditentukan apa yang terjadi ketika elemen diseret.

Dalam contoh di atas, properti OnDragStart memanggil fungsi, seret (peristiwa), yang menentukan data yang diseret.

Metode DataTransfer.SetData () Atur tipe data dan nilai data seret data:

 Function drag (ev) {ev.datatransfer.setData (text, ev.target.id);}

Dalam contoh ini, tipe data adalah teks, dan nilainya adalah ID (drag1) yang dapat menyeret elemen.

Acara OnDragover menetapkan di mana harus menempatkan data yang diseret.

Default, data/elemen tidak dapat ditempatkan di elemen lain. Jika Anda perlu mengatur penempatan yang diijinkan, kami harus mencegah pemrosesan elemen default.

Ini untuk menghubungi metode event.preventdefault () dari acara OnDragover: :):

 event.preventdefault ()

Ketika data seret ditempatkan, peristiwa drop terjadi.

Dalam contoh di atas, atribut OnDrop memanggil fungsi, drop (acara):

 Function drop (ev) {ev.preventdefault ();

Hubungi preventDefault () untuk menghindari pemrosesan data default browser (perilaku default acara drop dibuka di tautan)

Dapatkan data yang diseret melalui metode DataTransfer.getData (Teks). Metode ini akan kembali ke data apa pun dari jenis yang sama dalam metode setData ().

Data seret adalah ID dari elemen seret (drag1)

Elemen seret tambahan ke elemen penempatan (elemen target)

Di atas adalah semua konten dari artikel ini.