Html5 melaksanakan cara menyeret dan melepaskan imej antara dua elemen div_html5 petua tutorial

Kesan asal

Kesan selepas menyeret

Kodnya adalah seperti berikut

Salin kod

Kod tersebut adalah seperti berikut:

[kod]

< ;/body>



[/code]
Ia mungkin kelihatan agak rumit, tetapi kita boleh mengkaji bahagian seret dan lepas yang berbeza acara secara berasingan.

Tetapkan elemen sebagai boleh seret

Pertama sekali, untuk menjadikan elemen boleh seret, tetapkan atribut boleh seret kepada benar:

Salin kod

Kodnya adalah seperti berikut :

Apa yang hendak diseret - ondragstart dan setData()

Kemudian, nyatakan perkara yang berlaku apabila elemen itu diseret.

Dalam contoh di atas, atribut ondragstart memanggil fungsi, seret(

peristiwa

), yang menentukan data untuk diseret.

Kaedah dataTransfer.setData() menetapkan jenis data dan nilai data yang diseret:

Salin kod

kod adalah seperti berikut :

function drag(ev)

{

ev.dataTransfer.setData("Teks",ev.target.id);
}


Dalam contoh ini, jenis data ialah "Teks" dan nilainya ialah id unsur boleh seret ("seret1").
Di mana hendak diletakkan

- ondragover

Acara ondragover menentukan tempat untuk meletakkan data yang diseret.

Secara lalai, data/elemen tidak boleh diletakkan di dalam elemen lain. Jika kita perlu membenarkan peletakan, kita mesti menghalang pengendalian lalai bagi elemen tersebut.

Ini dilakukan dengan memanggil kaedah

event

.preventDefault() acara ondragover:

Salin kod

Kodnya adalah seperti berikut:

event.preventDefault()

ke tempat - hantar

Apabila data yang diseret digugurkan, peristiwa pengguguran akan berlaku.

Dalam contoh di atas, atribut ondrop memanggil fungsi, drop(

event

):

Salin kod

Kodnya adalah seperti berikut:

fungsi drop(ev)

{

ev.preventDefault(); "Teks ");
ev.target.appendChild(document.getElementById(data));

Penerangan kod:


Panggil preventDefault() untuk mengelakkan pemprosesan lalai data penyemak imbas (tingkah laku lalai acara drop ialah membukanya sebagai pautan) dan dapatkan data yang diseret melalui kaedah dataTransfer.getData("Teks"). Kaedah ini akan mengembalikan sebarang set data kepada jenis yang sama dalam kaedah setData(). Data yang diseret ialah id elemen yang diseret ("seret1"). Tambahkan elemen yang diseret ke elemen yang diletakkan (elemen sasaran)