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:

Salin kod

Kod tersebut adalah seperti berikut:

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:

Salin kod

The kod adalah seperti berikut:

setData(format,data): Berikan data yang diseret ke objek Pemindahan data.

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.

Salin kod

Kod adalah seperti berikut:

getData(format): Dapatkan data yang disimpan dalam dataTransfer drag data.

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

Salin kod

Kod adalah seperti berikut:

clearData(format): alih keluar data jenis yang ditentukan.

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:

Salin kod

Kod adalah seperti berikut:

effectAllowed: Menetapkan atau mendapatkan operasi yang boleh dilakukan oleh data dalam elemen sumber data.

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.

Salin kod

Kod adalah seperti berikut:

dropEffect: Tetapkan atau dapatkan sasaran seret Operasi yang dibenarkan pada .dan bentuk tetikus yang berkaitan.

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.

Salin kod

Kod adalah seperti berikut:

fail: Mengembalikan senarai fail yang diseret FileList.
Jenis: Senarai jenis data (data diseret) yang dihantar dalam ondragstart.

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:

<. 🎜>

Salin kodKod adalah seperti berikut:

dragstart: Dicetuskan apabila elemen yang hendak diseret mula diseret objek ialah elemen Seret dan lepas.
seret: Dicetuskan apabila elemen diseret. Objek peristiwa ini ialah elemen yang diseret.
dragenter: Dicetuskan apabila elemen seret memasuki elemen sasaran. Objek peristiwa ini ialah elemen sasaran.
dragover: Dicetuskan apabila elemen diseret dan dialihkan pada elemen sasaran Objek peristiwa ini ialah elemen sasaran.
dragleave: Dicetuskan apabila elemen diseret keluar daripada elemen sasaran Objek peristiwa ini ialah elemen sasaran.
jatuhkan: Dicetuskan apabila elemen yang diseret diletakkan dalam elemen sasaran Objek peristiwa ini ialah elemen sasaran.
dragend: Dicetuskan selepas jatuh, iaitu, dicetuskan apabila penyeretan selesai Objek acara ini ialah elemen yang diseret.

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:

Salin kod Kodnya adalah seperti berikut:

preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Teks",ev.target.id); >vardata=ev .dataTransfer.getData("Text"); skrip>

< ;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.

Salin kod

Kodnya adalah seperti berikut:

🎜>< ;html>


#section{font-family:"Georgia","Microsoft Yahei","中文中宋";}
.container{display:inline-block;min-height:200px;min-width:360px; warna: #f30;padding:30px;border:3pxsolid#ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.pratonton{max-width: 360px; }
#files-list{position:absolute;top:0;left:500px;}
#list{width:460px;}
#list.preview{max-width:250px;}
#listp{color:#888;font-size:12px;}
#list.green{color:#09c;}

>< ;body>

Seret imej anda ke dalam bekas di bawah:

Fail yang telah diseret masuk:

< ;ulid="list">