Komentar: Call preventDefault () Untuk menghindari pemrosesan data default browser (perilaku default peristiwa drop dibuka dalam formulir tautan) dan data yang diseret diperoleh melalui metode datatransfer.getData (teks). Teman yang tertarik dapat merujuknya.
Efek asli
Efek setelah menyeret
Kodenya adalah sebagai berikut
[kode]
<! Doctype html>
<Html>
<head>
<type style = "text/css">
#Div1, #Div2
{float: kiri; Lebar: 100px; Tinggi: 35px; margin: 10px; padding: 10px; Border: 1px solid #aaaaa;}
</tyle>
<type skrip = "Teks/JavaScript">
Fungsi Alldrop (EV)
{
ev.preventdefault ();
}
Function Drag (EV)
{
EV.DataTransfer.setData ("Teks", ev.target.id);
}
Function Drop (EV)
{
ev.preventdefault ();
var data = ev.DataTransfer.getData ("Teks");
ev.target.AppendChild (document.getElementById (data));
}
</script>
</head>
<body>
<img src = "/i/w3school_logo_black.gif" draggable = "true" ontdragStart = "drag (event)"/>
<div onsdrop = "drop (event)" onsdragover = "allndrop (event)">
</div>
<div onsdrop = "drop (event)" onsdragover = "allndrop (event)"> </div>
</body>
</html>
[/kode]
Ini mungkin tampak agak rumit, tetapi kita dapat mempelajari berbagai bagian dari acara drag and drop secara terpisah.
Atur elemen untuk menyeret dan menjatuhkan
Pertama, untuk membuat elemen dapat diseret, atur properti yang dapat diseret ke true:
<img draggable = "true" />
What To Freat - OnDragStart dan setData ()
Kemudian, tentukan apa yang terjadi ketika elemen diseret.
Dalam contoh di atas, properti OnDragStart memanggil fungsi, seret (peristiwa), yang menentukan data yang diseret.
Metode DataTransfer.SetData () mengatur tipe data dan nilai data yang diseret:
Function Drag (EV)
{
EV.DataTransfer.setData ("Teks", ev.target.id);
}
Dalam contoh ini, tipe data adalah teks dan nilainya adalah ID dari elemen yang dapat diseret (drag1).
Tempat letakkan - Ondragover
Acara OnDragover menentukan tempat untuk menempatkan data yang diseret.
Secara default, data/elemen tidak dapat ditempatkan di elemen lain. Jika Anda perlu mengatur izin penempatan, kami harus memblokir penanganan elemen default.
Ini dilakukan dengan memanggil metode event.preventdefault () dari acara OnDragover:
event.preventdefault ()
Buat penempatan - Ondrop
Acara drop terjadi ketika data drop ditempatkan.
Dalam contoh di atas, properti OnDrop memanggil fungsi, drop (acara):
Function Drop (EV)
{
ev.preventdefault ();
var data = ev.DataTransfer.getData ("Teks");
ev.target.AppendChild (document.getElementById (data));
}
Penjelasan Kode:
Call preventDefault () Untuk menghindari pemrosesan data default browser (perilaku default peristiwa drop dibuka dalam formulir tautan) untuk mendapatkan data yang diseret melalui metode datatransfer.getData (teks). Metode ini mengembalikan set data apa pun ke jenis yang sama dalam metode setData (). Data yang diseret adalah ID dari elemen yang diseret (drag1) menambahkan elemen yang diseret ke elemen penempatan (elemen target)