Serbuan pada Sambungan API Javascript HTML5 4—Seret/Lepaskan Gambaran Keseluruhan_html5 Petua Tutorial

Drag/Drop ialah fungsi yang sangat biasa. Anda boleh ambil objek dan seret ke kawasan yang anda mahu letakkan. Banyak javascript melaksanakan fungsi yang serupa, contohnya, komponen draganddrop jQueryUI. Dalam HTML5, seret dan lepas telah menjadi operasi standard dan disokong oleh mana-mana elemen. Oleh kerana ciri ini sangat biasa, semua pelayar utama menyokong operasi ini.
Mendayakan atribut boleh seret
Anda hanya perlu menukar atribut seret unsur kepada boleh seret, seperti yang ditunjukkan di bawah:

Pemindahan data semasa menyeret
Semasa proses menyeret, kami selalunya perlu memindahkan data logik yang sepadan untuk melengkapkan proses penukaran Di sini kami menggunakan objek Pemindahan data untuk pemindahan data, mari kita lihat ahlinya:
Ahli kaedah:


format: parameter Rentetan yang menentukan jenis data yang diseret. Nilai parameter ini boleh menjadi "Teks" (jenis teks) dan "URL" (jenis URL). Parameter ini bebas huruf besar-kecil, jadi hantaran dalam "teks" dan "Teks" adalah sama.
data: Parameter jenis varian yang menentukan data yang diseret. Data boleh berupa teks, laluan imej, URL, dsb.
Fungsi ini mempunyai nilai pulangan Boolean benar bermakna data berjaya ditambahkan pada Pemindahan data, palsu bermakna tidak berjaya. Jika perlu, anda boleh menggunakan parameter ini untuk memutuskan sama ada logik tertentu harus terus dilaksanakan.


Maksud format adalah sama seperti dalam setData, dan nilainya boleh menjadi "Teks" (jenis teks) dan "URL" (jenis URL).


Selain "Teks" (jenis teks) dan "URL" (jenis URL) yang boleh ditentukan di atas, format di sini juga boleh mengambil nilai berikut: fail-fail, html- elemen html, imej -gambar.
Kaedah ini boleh digunakan untuk memproses jenis data yang diseret secara selektif.
Ahli atribut:


Jenis atribut ialah rentetan, dan julat nilai adalah seperti berikut:
"copy"-copy data
"link"-link data
"move"-. alihkan data
"copyLink"-Salin atau paut data, ditentukan oleh objek sasaran.
"copyMove"-Salin atau alihkan data, ditentukan oleh objek sasaran.
"linkMove" - ​​​​Pautkan atau alihkan data, seperti yang ditentukan oleh objek sasaran.
"semua"-Semua operasi disokong.
"tiada"-Lumpuhkan penyeretan.
"uninitialized"-Nilai lalai, pakai tingkah laku lalai.
Perhatikan bahawa selepas menetapkan effectAllowed to none, menyeret adalah dilarang, tetapi bentuk tetikus masih memaparkan bentuk objek yang tidak boleh diseret. Jika anda tidak mahu memaparkan bentuk tetikus ini, anda perlu menetapkan atribut returnValue peristiwa peristiwa tetingkap kepada palsu.


Jenis atribut ialah rentetan, dan julat nilai adalah seperti berikut:
"salinan"-tetikus dipaparkan sebagai bentuk apabila disalin
"pautan"-tetikus ialah; dipaparkan sebagai bentuk bersambung;
"move"-Tetikus muncul sebagai bentuk bergerak.
"tiada" (lalai) - Tetikus muncul sebagai bentuk tanpa menyeret.
effectAllowed menentukan operasi yang disokong oleh sumber data, jadi ia biasanya dinyatakan dalam acara ondragstart. dropEffect menentukan operasi yang disokong oleh sasaran seret dan lepas, jadi bersempena dengan effectAllowed, ia biasanya digunakan dalam acara ondragenter, ondragover dan ondrop pada sasaran seret.


Kewujudan objek Pemindahan data memungkinkan untuk memindahkan data logik antara sumber data yang diseret dan elemen sasaran. Biasanya kami menggunakan kaedah setData untuk menyediakan data dalam acara ondragstart elemen sumber data, dan kemudian menggunakan kaedah getData untuk mendapatkan data dalam elemen sasaran.
Peristiwa yang dicetuskan semasa menyeret
Berikut ialah peristiwa yang akan berlaku semasa seretan Pada asasnya, urutan peristiwa yang mencetuskan ialah urutan berikut:

Pada asasnya, parameter acara acara akan diluluskan dalam elemen yang berkaitan, yang boleh diubah suai dengan mudah. Di sini, kami tidak perlu mengendalikan setiap acara, biasanya kami hanya perlu menyambung acara utama.

Acara mula-ondragstart seret Parameter yang dihantar masuk dari acara ini mengandungi maklumat yang sangat kaya, yang daripadanya elemen yang diseret (event.Target) boleh diperolehi dengan mudah; Anda boleh menetapkan data yang diseret (event.dataTransfer.setData); supaya anda boleh melaksanakan logik di sebalik penyeretan dengan mudah (sudah tentu anda juga boleh melepasi parameter lain apabila mengikat).

Semasa proses menyeret - acara ondrag, ondragover, ondragenter dan ondragleave
Objek acara ondrag ialah elemen seret, dan biasanya acara ini dikendalikan kurang kerap. Peristiwa ondragenter berlaku apabila seretan memasuki elemen semasa, peristiwa ondragleave berlaku apabila seretan meninggalkan elemen semasa, dan peristiwa ondragover berlaku apabila seretan bergerak dalam elemen semasa. Anda hanya perlu memberi perhatian kepada satu perkara di sini, kerana secara lalai, penyemak imbas melarang elemen daripada digugurkan, jadi untuk membolehkan elemen digugurkan, anda perlu mengembalikan palsu dalam fungsi ini atau memanggil acara.preventDefault () kaedah. Seperti yang ditunjukkan dalam contoh di bawah.

Seret end-ondrop, ondragend event Apabila data boleh seret digugurkan, acara drop akan dicetuskan. Selepas penurunan selesai, acara dragend dicetuskan, dan acara ini agak jarang digunakan.
Lihat contoh mudah:



< ;imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/>

Menyeret fail
Contoh di atas telah menggunakan pelbagai kaedah dan atribut Pemindahan data Mari lihat satu lagi aplikasi menarik di Internet: seret dan lepaskan imej ke halaman web, dan kemudian dipaparkan pada laman web tersebut. Aplikasi ini menggunakan atribut fail dataTransfer.

Fail yang telah diseret masuk:

< ;ulid="list">