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:
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.
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).
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:
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.
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.
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:
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:
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.
🎜>< ;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">
