Seret dan drop adalah fitur umum, yaitu seret ke posisi lain setelah objek penangkapan. Di HTML5, pengguna dapat menggunakan mouse untuk memilih elemen seret, seret elemen ke elemen yang dapat ditempatkan, dan meletakkan tombol mouse ke elemen -elemen ini. Selama operasi seret, semi -transparan yang menunjukkan pointer mouse dapat diseret.
Jika kami berharap elemen dapat diseret, maka kami perlu mengatur properti yang dapat diseret ke true (default tag yang dapat diseret benar)))
Acara Seret dan JatuhkanBeberapa peristiwa akan dipicu pada berbagai tahap operasi drag and drop, dan atribut DataTransfer dari insiden seret dan seret harus menyimpan data yang relevan dalam operasi drag and drop.
| Dragstart | Aktif untuk [elemen sumber], ketika elemen mulai diseret, elemen seret pengguna memerlukan acara DragStart tambahan. Dalam kejadian ini, pendengar akan mengatur informasi yang terkait dengan seret ini, seperti menyeret data dan gambar. |
| Dragenter | Aktif untuk [elemen sumber], memicu ketika mouse di seret ke elemen. Pendengar kejadian ini perlu menunjukkan apakah tikus diizinkan untuk dilepaskan di daerah ini. Jika pendengar tidak diatur atau pendengar tidak dioperasikan, itu tidak diizinkan untuk dirilis secara default. |
| dragover | Aktif di [elemen target], memicu ketika mouse bergerak dengan hambatan. |
| Dragleave | Aktif di [elemen target], memicu ketika mouse meninggalkan elemen dalam menyeret. Ini dapat digunakan sebagai tanda sorotan atau sisipan yang dapat dilepaskan. |
| Menyeret | Aktif untuk [elemen sumber], acara dipicu ketika elemen diseret. |
| menjatuhkan | Aktifkan untuk [elemen target], memicu elemen pelepasan ketika rilis rilis operasi seret. |
| Dragnd | Aktif untuk [elemen sumber], sumber seret dipicu pada akhir operasi seret, terlepas dari apakah operasi berhasil. |
(Saat menyeret, itu hanya akan memicu peristiwa terkait seret, peristiwa mouse, seperti mousemove, yang tidak akan dipicu)
Objek DataTransferSaat memproses operasi seret dan lepas, kita perlu menggunakan objek DataTransfer untuk menyimpan data yang diseret. DataTransfer dapat menyimpan satu atau lebih data, satu atau lebih tipe data.
milik
| Dropfect | Dropfect [String] Tentukan efek penempatan aktual, nilai yang mungkin: Salin: Salin ke posisi baru Pindah: Pindah ke posisi baru Tautan: Buat tautan dari sumber ke posisi baru Tidak ada: Terlarang untuk menempatkan (tidak ada operasi) |
| Efektual | [String] Tentukan efek yang diijinkan saat menyeret, kemungkinan nilai: Salin: Salin ke posisi baru. Pindah: Pindah ke posisi baru. Tautan: Buat tautan dari sumber ke lokasi baru. Copylink: Izinkan salin atau tautan. Copymove: Izinkan salin atau bergerak. LinkMove: Izinkan tautan atau pindahkan. Semua: Izinkan semua operasi. Tidak ada: Terlarang semua operasi. Tidak diinisialisasi: Nilai default (nilai default) setara dengan semua. |
| File | Berisi daftar file lokal yang tersedia pada transmisi data. Jika operasi seret tidak melibatkan file seret, atribut ini adalah daftar kosong. |
| tipe | Simpan daftar jenis data penyimpanan sebagai item pertama, pesanan ini konsisten dengan urutan penambahan data. Jika tidak ada data yang ditambahkan, daftar kosong akan dikembalikan. |
metode
| void addeLement (elemen elemen) | Atur sumber seret. Biasanya tidak perlu mengubah ini. Tujuan default adalah untuk diseret node |
| Void clearData (tipe string) | Hapus data yang terkait dengan jenis yang diberikan. Jenis parameter adalah opsional. Jika jenisnya kosong atau tidak ditentukan, hapus semua jenis data terkait. Jika tidak ada jenis data atau transmisi data yang ditentukan tidak mengandung data apa pun, metode ini tidak akan berpengaruh. |
| String getData (tipe string) | Memperoleh jenis data yang diberikan, jika data dari jenis yang diberikan tidak ada atau data disimpan tanpa berisi data, metode ini akan mengembalikan string kosong. |
| void setData (tipe string, data string) | Atur data untuk jenis yang diberikan. Jika tipe data tidak ada, itu akan ditambahkan ke akhir, dan proyek terakhir dalam daftar jenis ini akan menjadi format baru. Jika Anda sudah ada, ganti data yang ada di posisi yang sama. Artinya, ketika jenis data yang sama diganti, urutan daftar tipe tidak akan diubah. |
| void setDragimage (gambar domelement, long x, long y) | Kustomisasi gambar hambatan yang diharapkan. Dalam kebanyakan kasus, item ini tidak perlu diatur, karena simpul yang diseret dibuat sebagai gambar default. Gambar harus digunakan sebagai elemen gambar umpan balik seret Perpindahan horizontal pada gambar x. Offset vertikal di patung Y. |
Dukungan Browser
Internet Explorer 9+, Firefox, Opera 12, Chrome dan Safari 5+
Kode demonstrasi
<! ; Solid #ccccff; > </div> <div class = bin> & nbsp; </div> </div> <script type = text/javaScript> var bin = document.queeryleToLall ('. '. E.Datatransfer.EffectAllowed = 'Move'; true; Elemen Seret Memasuki Elemen Target. '; function (e) {if (drag) {drag.parentnode.removechild (drag); Fungsi (e) {e.preventdefault ();Di atas adalah pengenalan informasi drag and drop -lepas di HTML5.