Drag/Drop adalah fitur yang sangat umum. Anda dapat mengambil objek dan menyeretnya ke area yang ingin Anda tempatkan. Banyak JavaScripts menerapkan fungsi terkait dengan cara yang sama, seperti komponen draganddrop JQueryUI. Di HTML5, drop drop menjadi operasi standar dan setiap elemen mendukungnya. Karena fungsi ini sangat umum, semua browser utama mendukung operasi ini.
Aktifkan properti drag-draggableIni sangat sederhana. Cukup ubah atribut seret suatu elemen ke Draggable, dan elemen ini mendukung seret, seperti yang ditunjukkan di bawah ini:
<imgdraggable = "true"/>
Lewat data saat menyeretSelama proses seret, kita sering perlu meneruskan data logis yang sesuai untuk menyelesaikan proses konversi. Di sini kami terutama menggunakan objek DataTransfer untuk transfer data. Mari kita lihat anggotanya terlebih dahulu:
Metode Anggota:
setData (format, data): Tetapkan data yang diseret ke objek DataTransfer.
Format: Parameter string yang menentukan jenis data yang diseret. Nilai parameter ini dapat berupa teks (tipe teks) dan URL (tipe URL). Parameter ini tidak tergantung pada case, sehingga teksnya sama dengan teks.
Data: Parameter tipe varian yang menentukan data yang diseret. Data dapat berupa teks, jalur gambar, URL, dll.
Fungsi ini memiliki nilai pengembalian tipe boolean. Benar berarti bahwa data berhasil ditambahkan ke DataTransfer, dan False berarti tidak berhasil. Jika perlu, parameter ini dapat digunakan untuk memutuskan apakah beberapa logika harus dilanjutkan.
getData (format): Dapatkan data seret yang disimpan di DataTransfer.
Format berarti sama seperti di setData, dan nilainya dapat berupa teks (tipe teks) dan URL (tipe url).
clearData (format): Menghapus data dari jenis yang ditentukan.
Selain teks (tipe teks) dan URL (tipe url) yang dapat ditentukan di atas, format di sini juga dapat mengambil nilai-nilai berikut: file file, elemen html-html, gambar-gambar.
Metode ini dapat digunakan untuk memproses tipe data yang diseret secara selektif.
Anggota atribut :EffectAllowed: Set atau mendapatkan operasi yang dapat dilakukan oleh data sumber data.
Jenis atribut adalah string, dan rentang nilai adalah sebagai berikut:
data salin salinan.
data tautan-tautan.
Data Pindahkan-Mobile
COPYLINK - Salin atau tautan data, ditentukan oleh objek target.
Copymove - Salin atau pindahkan data, ditentukan oleh objek target.
LinkMove - Tautan atau Pindahkan Data, ditentukan oleh objek target.
semua operasi semua didukung.
Tidak ada drag yang dilarang.
Tidak diinisialisasi - Nilai default, mengadopsi perilaku default.
Perhatikan bahwa setelah pengaturan yang tidak masuk akal hingga tidak ada, menyeret dilarang, tetapi bentuk mouse masih menunjukkan bentuk objek yang tidak dapat diseret. Jika Anda tidak ingin menampilkan bentuk mouse ini, Anda perlu mengatur nilai pengembalian properti dari acara acara jendela menjadi false.
Dropeffect: Set atau mendapatkan operasi yang diizinkan pada target yang diseret dan bentuk mouse yang terkait.
Jenis atribut adalah string, dan rentang nilai adalah sebagai berikut :salin-bentuk mouse saat muncul sebagai salinan;
Tautan-mouse ditampilkan sebagai bentuk koneksi;
Pindah-mouse muncul sebagai bentuk yang bergerak.
Tidak ada (default) - Mouse muncul sebagai bentuk tanpa menyeret.
Efek yang dapat ditentukan oleh operasi yang didukung oleh sumber data, sehingga biasanya ditentukan dalam acara OnDragStart. Dropeffect Menentukan tindakan yang didukung dengan menyeret target, sehingga biasanya digunakan dalam peristiwa seperti OnDragenter, OnDragover dan Ondrop pada target yang diseret.
File: Mengembalikan daftar file file yang diseret.
Jenis: Daftar Jenis Data yang Dikirim di OnDragStart (Data Seret).
Keberadaan objek DataTransfer memungkinkan untuk melewati data logis antara sumber data yang diseret dan elemen target. Biasanya kami menggunakan metode setData untuk menyediakan data dalam acara OnDragStart dari elemen sumber data, dan kemudian di elemen target, kami menggunakan metode GetData untuk mendapatkan data.
Peristiwa yang dipicu saat menyeretBerikut ini adalah peristiwa yang akan terjadi saat menyeret dan menjatuhkan. Pada dasarnya, urutan acara pemicu adalah urutan berikut:
DragStart: dipicu saat elemen yang akan diseret mulai menyeret. Objek acara ini adalah elemen yang diseret.
Seret: dipicu saat menyeret elemen, objek peristiwa ini adalah elemen yang diseret.
Dragenter: dipicu saat menyeret elemen ke elemen target. Objek acara ini adalah elemen target.
Dragover: dipicu saat menyeret elemen untuk bergerak pada elemen target. Objek acara ini adalah elemen target.
Dragleave: dipicu saat menyeret elemen menjauh dari elemen target. Objek acara ini adalah elemen target.
Jatuhkan: dipicu ketika elemen yang diseret ditempatkan di elemen target. Objek acara ini adalah elemen target.
Dragend: dipicu setelah drop, yang dipicu saat seret selesai. Objek acara ini adalah elemen yang diseret.
Pada dasarnya, acara parameter acara akan lulus dalam elemen terkait, yang dapat dengan mudah dimodifikasi. Di sini, kami tidak perlu menangani setiap acara, kami biasanya hanya perlu menghubungkan beberapa acara utama.
Acara DragStartParameter yang disahkan dari acara ini berisi banyak informasi, dan Anda dapat dengan mudah mendapatkan elemen yang diseret (event.target); Anda dapat mengatur data yang diseret (event.datatransfer.setData); Jadi, Anda dapat dengan mudah menerapkan logika di belakang hambatan (tentu saja, Anda juga dapat melewati parameter lain saat mengikat).
Selama menyeret - Acara OnDrag, OnDragover, OnDragenter dan OnDragleave Objek acara OnDrag adalah elemen seret, dan acara ini biasanya lebih jarang ditangani. Peristiwa OnDragenter terjadi ketika menyeret ke elemen saat ini, peristiwa OnDragleave terjadi ketika menyeret keluar dari elemen saat ini, dan peristiwa OnDragover terjadi ketika menyeret bergerak pada elemen saat ini.Hanya satu hal yang perlu diperhatikan di sini adalah bahwa secara default, browser melarang menjatuhkan elemen, jadi agar elemen dapat jatuh, Anda perlu mengembalikan false dalam fungsi ini atau memanggil metode event.preventDefault (). Seperti yang ditunjukkan dalam contoh berikut.
Drag end - onsdrop, event onsdragendKetika data yang dapat ditarik dijatuhkan, acara drop dipicu. Setelah drop berakhir, acara Dragend dipicu, dan acara ini digunakan relatif lebih sedikit.
Mari kita lihat contoh sederhana:
<! Doctypehtml>
<Html>
<head>
<ScriptType = "Text/JavaScript">
functionAllowDrop (ev) {
ev.preventdefault ();
}
functionDrag (ev) {
EV.DataTransfer.setData ("Teks", ev.target.id);
}
functionDrop (ev) {
vardata = ev.datatransfer.getData ("teks");
ev.target.AppendChild (document.getElementById (data));
ev.preventdefault ();
}
</script>
</head>
<body>
<Divid = "Div1" onsdrop = "drop (event)" onsdragover = "AllowDrop (Event)"> </div>
<imgid = "drag1" src = "img_logo.gif" draggable = "true" ontdragStart = "drag (event)" width = "336" height = "69"/>
</body>
</html>
File Seret dan SeretContoh di atas telah menggunakan berbagai metode dan sifat DataTransfer. Mari kita lihat aplikasi lain yang menarik di internet: seret dan jatuhkan gambar di halaman web dan kemudian tampilkan di halaman web. Aplikasi ini menggunakan properti file dari DataTransfer.
<! Doctypehtml>
<Html>
<head>
<Metacharset = "UTF-8">
<title> html5 seret dan lepas file </iteme>
<tyle>
#section {font-family: "Georgia", "Microsoft Yahei", "Lagu Cina";}
.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; -webkit-border-radius: 10px; border-radius: 10px;
.preview {max-width: 360px;}
#file-list {position: absolute; atas: 0; kiri: 500px;}
#list {width: 460px;}
#list.preview {max-width: 250px;}
#listp {color:#888; font-size: 12px;}
#list.green {color:#09c;}
</tyle>
</head>
<body>
<Divid = "bagian">
<p> Seret gambar Anda ke dalam wadah di bawah ini: </p>
<divid = "container" class = "container">
</div>
<Divid = "File-List">
<p> File yang telah diseret: </p>
<ulid = "list"> </ul>
</div>
</div>
<script>
if (window.filereader) {
varlist = document.geteLementById ('list'),
cnt = document.geteLementById ('container');
// menilai apakah gambarannya
functionImage (type) {
switch (type) {
case'image/jpeg ':
case'image/png ':
case'image/gif ':
case'image/bmp ':
case'image/jpg ':
kembali;
bawaan:
returnfalse;
}
}
// Tangani daftar file seret dan lepas
functionHandfileSelect (evt) {
evt.stoppropagation ();
evt.preventdefault ();
varfiles = evt.DataTransfer.files;
untuk (vari = 0, f; f = file [i]; i ++) {
vart = f.type? f.type: 'n/a',
reader = newFileReader (),
terlihat = fungsi (f, img) {
list.innerHtml+= '<li> <strong>'+f.name+'</strong> ('+t+
')-'+f.size+'bytes <p>'+img+'</p> </li>';
cnt.innerhtml = img;
},
isimg = isimage (t),
IMG;
// memproses gambar yang diperoleh
if (isimg) {
reader.onload = (function (thefile) {
returnFunction (e) {
img = '<imgclass = "pratinjau" src = "'+e.target.result+'" title = "'+thefile.name+'"/>';
terlihat (thefile, img);
};
})(F)
reader.readasdataurl (f);
}kalau tidak{
img = '"o ((> Ω <)) o", yang Anda kirim bukan gambar! Lai ';
terlihat (f, img);
}
}
}
// Tangani efek penyisipan dan seret keluar
functionHandLragenter (evt) {this.setAttribute ('style', 'border-style: delashed;');}
functionHandledRagleave (evt) {this.setAttribute ('style', '');}
// Tangani acara menyeret file untuk mencegah pengalihan yang disebabkan oleh peristiwa default browser
functionHandDragover (evt) {
evt.stoppropagation ();
evt.preventdefault ();
}
cnt.addeventListener ('dragenter', handledragenter, false);
cnt.addeventListener ('dragover', handledragover, false);
cnt.addeventListener ('drop', handlefile select, false);
cnt.addeventListener ('dragleave', handledragleave, false);
}kalau tidak{
document.geteLementById ('bagian'). innerHtml = 'browser Anda tidak mendukungnya, teman sekelas';
}
</script>
</body>
</html>
Dalam contoh ini, API membaca file di HTML5 digunakan: objek filereader; Objek ini memberikan metode asinkron berikut untuk membaca file:
1.Filereader.readasBinaryString (FileBlob)
Baca file dalam mode biner, atribut hasil akan berisi format biner dari file
2.Filereader.readastext (FileBlob, Opt_encoding)
Baca file dalam mode teks. Atribut hasil akan berisi format teks file. Parameter decoding default adalah UTF-8.
3.Filereader.readasDataurl (file)
Membaca Hasil File dalam Formulir URL akan berisi format dataurl dari file (gambar biasanya dengan cara ini).
Ketika file dibaca menggunakan metode di atas, peristiwa berikut akan dipicu:
OnloadStart, Onprogress, Onabort, Onerror, Onload, OnloadEnd
Peristiwa ini sangat sederhana, cukup terhubung saat dibutuhkan. Lihat contoh kode berikut:
functionStartread () {
// Dapatkan Inputelementthroughdom
varfile = document.getElementById ('file'). File [0];
if (file) {
getastext (file);
}
}
functionGetastext (readFile) {
varreader = newFileReader ();
// readfileIntomoryasutf-16
reader.readastext (readfile, "UTF-16");
// HandleProgress, Success, Anderrors
reader.onprogress = updateProgress;
reader.onload = dimuat;
reader.onerror = errorhandler;
}
functionUpdateProgress (evt) {
if (evt.lengthcomputable) {
//evt.LoadedAndevt.totalareprogressEventProperties
varloaded = (evt.Loaded/evt.total);
if (dimuat <1) {
// MeningkatkanProgBarLength
//style.width=(loaded*200)+"px ";
}
}
}
functionloaded (evt) {
// dapatkan yang diperoleh
varfilestring = evt.target.Result;
// handleutf-16filedump
if (utils.regexp.ischinese (filestring)) {
// Chinesecharacters+namevalidation
}
kalau tidak{
// runothercharsettest
}
//xhr.send(filestring)
}
functionErrorHandler (evt) {
if (evt.target.error.name == "notreadableerr") {
// Thefile tidak bisa
}
}
Izinkan saya membicarakannya secara singkat di sini: Unduh File Biasa Menggunakan metode Window.Open, misalnya:
window.open ('http://aaa.bbbb.com/ccc.rar' ,'_blank')
Referensi Praktis: Dokumen Resmi: http://www.w3schools.com/html5/Situs web tutorial yang bagus: http://html5.phphube.com/html5/features/drapanddrop/
Bantuan MSDN: http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
Deskripsi terperinci dari file drag dan drop: http://www.html5rocks.com/zh/tutorials/file/dndfiles/
Seret dan unggah file: http://www.chinaz.com/design/2010/0909/131984.shtml
Contoh Lengkap File Drag dan Jatuhkan Upload: http://www.vevb.com/liaofeng/archive/2011/05/18/2049928.html
Contoh Unduh File: http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
Window.open Guide: http://www.vevb.com/liulf/archive/2010/03/01/1675511.html
Parameter window.open: http://www.koyoz.com/blog/?action=show&id=176