Html5 melaksanakan cara menyeret dan melepaskan imej antara dua elemen div

Kesan asal

Kesan selepas menyeret

Kodnya adalah seperti berikut

Salin kod Kod tersebut adalah seperti berikut: [kod] #div1, #div2 {float:left ; lebar: 100px; tinggi:35px; jidar:10px;padding:10px;border:1px pepejal >fungsi allowDrop (ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev. target.id ); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target .appendChild(document.getElementById(data)); } &lt ;/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)

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