Ciri Seret dan Lepas boleh membantu meningkatkan prestasi iPad anda. Begini cara menggunakannya.
Jadi anda boleh mengalihkan fail daripada satu perkhidmatan storan awan ke perkhidmatan storan awan yang lain, menyalin teks daripada Safari ke apl pengeditan teks untuk menambah petikan atau menyandarkan foto tertentu pada apl storan fail.
Cara menyeret dan melepaskan foto, fail dan teks1. Sentuh dan tahan foto, fail atau teks yang diserlahkan yang anda mahu seret ke apl lain.
2. Seret item ke lokasi yang dikehendaki dalam aplikasi ini atau yang lain yang telah anda buka dalam mod Slide Over atau Split View dan lepaskan.
1. Sentuh dan tahan salah satu foto atau fail yang anda mahu seret.
2. Semasa menyeret item semasa, ketik foto atau fail lain yang anda juga mahu seret. Lakukan ini sekali lagi dengan seberapa banyak item yang anda mahu alihkan.
3. Seret semua objek yang dipilih ke lokasi yang ditetapkan dalam aplikasi lain yang telah anda buka dalam mod Slide Over atau Split View dan lepaskannya.
1. Sentuh dan tahan bahagian teks yang anda mahu seret untuk memilihnya.
2. Gunakan titik pilihan untuk menyerlahkan baki teks yang anda mahu seret.
3. Sentuh dan tahan teks yang diserlahkan.
4. Seret teks ke aplikasi di mana anda mahu meletakkannya dan lepaskannya.
Walaupun kebanyakan ciri drag-and-drop dalam iOS hanya berfungsi pada iPad, helah ini sebenarnya berfungsi pada iPhone dan iPad. Ini membolehkan anda mengatur susun atur apl pada skrin utama anda menggunakan Seret dan Lepas daripada mengalihkannya satu demi satu.
1. Sentuh dan tahan ikon apl yang anda mahu ubah kedudukannya pada skrin Utama.
2. Ketik apl tambahan yang anda mahu alihkan juga.
3. Seret apl ini ke halaman atau folder yang anda mahu apl itu masuk dan lepaskannya.
182
Dalam contoh ini, kami memilih elemen div dan menjadikannya boleh alih dengan memanggil kaedah draggable() padanya. Seperti yang ditunjukkan dalam rajah di bawah, dalam dokumen yang dibuka, elemen mengambil kedudukan biasa, tetapi selepas itu ia boleh dialihkan menggunakan penuding tetikus ke mana-mana tempat dalam tetingkap penyemak imbas:
Keupayaan untuk menyeret dan melepaskan elemen berguna dengan sendirinya, tetapi ia lebih berguna apabila digunakan bersama dengan interaksi Droppable, yang diterangkan seterusnya.
Interaksi boleh seret dicapai semata-mata melalui penggunaan penanda HTML dan gaya CSS tertentu. Ini bermakna bahawa fungsi ini akan berfungsi dalam hampir mana-mana pelayar, tetapi elemen yang dikurniakan dengannya tidak akan dapat berfungsi dengan ciri seret dan lepas asli yang serupa pada sistem pengendalian.
Operasi seret dan lepas yang ditakrifkan oleh spesifikasi HTML5 biasanya dilaksanakan menggunakan mekanisme sistem pengendalian asli. Jika anda menggunakan mekanisme Seret dan lepas UI jQuery, maka adalah lebih baik untuk melumpuhkan ciri HTML5 yang setara untuk mengelakkan konflik. Untuk melakukan ini, tetapkan atribut boleh seret bagi elemen badan dokumen kepada palsu.
Menyediakan interaksi Boleh SeretTerdapat banyak pilihan penyesuaian untuk interaksi Boleh Seret. Sifat yang paling penting, yang dibincangkan dalam bahagian berikut, ditunjukkan dalam jadual di bawah:
| paksi | Mengehadkan keupayaan untuk bergerak ke arah tertentu. Nilai lalai adalah palsu, yang bermaksud tiada kekangan, tetapi anda juga boleh menentukan nilai "x" (bergerak sepanjang paksi X sahaja) atau "y" (bergerak sepanjang paksi Y sahaja) |
| pembendungan | Hadkan lokasi elemen yang dialihkan ke kawasan tertentu pada skrin. Jenis nilai yang disokong diterangkan dalam jadual di bawah, menggunakan contoh yang sepadan. Nilai lalai adalah palsu, yang bermaksud tiada sekatan |
| kelewatan | Menentukan berapa lama elemen mesti diseret sebelum ia bergerak. Nilai lalai ialah 0, yang bermaksud tiada kelewatan |
| jarak | Mentakrifkan jarak pengguna mesti menyeret elemen dari kedudukan permulaannya sebelum ia benar-benar bergerak. Nilai lalai ialah 1 piksel |
| grid | Memaksa menyentap elemen yang dipindahkan ke sel grid. Nilai lalai adalah palsu, yang bermaksud tiada pengikatan |
Terdapat beberapa cara anda boleh menyekat pergerakan elemen ke arah tertentu. Yang pertama ialah menggunakan pilihan paksi, yang membolehkan anda menyekat arah pergerakan ke paksi X atau Y. Contoh ini ditunjukkan di bawah:
... div.dragElement (saiz fon: besar; sempadan: hitam pepejal nipis; padding:16px; lebar: 8em; penjajaran teks: tengah; warna latar: kelabu terang; jidar: 4px ) $(function() ($ (".dragElement").draggable(( paksi: "x")).filter("#dragV").draggable("option", "axis", "y"); )); Seret menegak Seret mendatar Jalankan contoh
Dalam contoh ini, kami mentakrifkan dua elemen div, pilihnya menggunakan jQuery, dan panggil kaedah draggable(). Sebagai hujah kepada kaedah ini, kami menghantar objek yang pada mulanya menyekat pergerakan kedua-dua elemen div ke arah sepanjang paksi X. Dengan menggunakan kaedah penapis jQuery(), kami dapat memilih elemen dragV tanpa jQuery mencari keseluruhan dokumen sekali lagi dan tetapkannya ke arah pergerakan yang dibenarkan berbeza - di sepanjang paksi Y. Oleh itu, kita mendapat dokumen di mana satu elemen div hanya boleh diseret ke arah menegak, dan yang lain - hanya dalam arah mendatar. Hasilnya ditunjukkan dalam rajah:
Anda juga boleh mengehadkan kawasan skrin di mana anda boleh menyeret item. Untuk melakukan ini, gunakan pilihan pembendungan. Format nilai yang boleh ditentukan dalam pilihan ini diterangkan dalam jadual di bawah:
Contoh penggunaan pilihan pembendungan diberikan di bawah:
... div.dragElement (saiz fon: besar; sempadan: hitam pepejal nipis; padding:16px; lebar: 8em; penjajaran teks: tengah; warna latar belakang: kelabu terang; jidar: 4px ) #bekas ( sempadan: dua kali ganda sederhana hitam; lebar: 700px; tinggi: 450px) $(function() ( $(".dragElement").draggable(( containment: "parent" )).filter("#dragH").draggable("option", " paksi", "x"); )); Seret secara mendatar Seret dalam contoh Run induk
Dalam contoh ini, kedua-dua elemen adalah terhad dalam keupayaan mereka untuk bergerak supaya ia hanya boleh diseret dalam elemen induknya, iaitu div bersaiz tetap. Salah satu div yang diapungkan mempunyai kekangan tambahan untuk diapungkan menggunakan pilihan paksi kerana ia hanya boleh bergerak secara mendatar dalam induknya. Hasilnya digambarkan dalam rajah:
Pilihan grid membolehkan anda menetapkan pengikatan elemen yang dipindahkan ke sel grid. Pilihan ini mengambil sebagai nilai tatasusunan dua elemen yang menentukan lebar dan ketinggian sel grid dalam piksel. Contoh penggunaan pilihan grid diberikan di bawah:
... #draggable (font-size: x-large; border: thin solid black; width: 5em; text-align: center; padding:10px) $(function() ($("#draggable").draggable( ( grid: )); )); Seret saya contoh Run
Contoh ini menentukan grid dengan sel 100 piksel lebar dan 50 piksel tinggi. Apabila anda menyeret elemen, ia "melompat" dari satu sel (tidak kelihatan) ke sel yang lain. Kesan snap ialah contoh yang bagus tentang cara fungsi interaksi boleh digunakan, tetapi sukar untuk disampaikan menggunakan tangkapan skrin.
Anda boleh mencipta kesan snap untuk satu arah sahaja dengan menetapkan paksi pergerakan bebas kepada 1. Sebagai contoh, jika anda menetapkan pilihan grid kepada , elemen itu akan menyentap kepada sel grid lebar 100 piksel apabila dialihkan secara mendatar, tetapi akan bergerak bebas secara menegak.
Bergerak kelewatanTerdapat dua pilihan yang membolehkan anda menangguhkan penyeretan elemen bergerak. Pilihan kelewatan membolehkan anda menentukan jumlah masa, dalam milisaat, bahawa pengguna mesti menyeret penuding tetikus sebelum elemen itu sebenarnya dialihkan. Satu lagi jenis kelewatan disediakan oleh pilihan jarak, yang menentukan jarak dalam piksel yang pengguna mesti menyeret penuding tetikus sebelum ia diikuti oleh elemen.
Contoh menggunakan kedua-dua tetapan diberikan di bawah:
... #masa, #jarak (saiz fon: besar; sempadan: hitam pepejal nipis; padding: 10px; lebar: 120px; penjajaran teks: tengah; warna latar belakang: kelabu terang; jidar: 4px; ) $(function( ) ($("#masa").boleh diseret(( kelewatan: 1000 )) $("#jarak").boleh diseret(( jarak: 150 )) )); Sekat dengan kelewatan masa Sekat dengan jarak minimum Contoh Larian
Dalam contoh ini terdapat dua elemen boleh alih, satu daripadanya ditangguhkan menggunakan pilihan kelewatan, dan satu lagi ditangguhkan menggunakan pilihan jarak.
Dalam kes kelewatan, yang ditentukan oleh pilihan kelewatan, pengguna mesti menyeret untuk tempoh masa tertentu sebelum ia benar-benar menggerakkan elemen. Dalam contoh ini, tempoh tempoh ini ialah 1000 ms. Ia tidak perlu untuk menggerakkan tetikus pada masa ini, tetapi sepanjang tempoh penangguhan, butang tetikus mesti terus ditekan, selepas itu elemen boleh digerakkan dengan menggerakkan tetikus. Selepas masa tunda telah berlalu, elemen yang dialihkan akan terkunci ke lokasi penuding tetikus, tertakluk kepada kekangan yang dikenakan oleh pilihan grid, rantau dan paksi yang dibincangkan sebelum ini.
Pilihan jarak mempunyai kesan yang sama, tetapi dalam kes ini pengguna mesti menyeret penuding tetikus sekurang-kurangnya bilangan piksel tertentu ke mana-mana arah dari lokasi permulaan elemen. Elemen yang dialihkan kemudiannya akan melompat ke lokasi penunjuk semasa.
Jika anda menggunakan kedua-dua tetapan pada elemen yang sama, elemen yang dialihkan tidak akan bergerak sehingga kedua-dua kriteria kelewatan dipenuhi, i.e. sehingga percubaan untuk menyeret elemen berlangsung untuk jangka masa tertentu dan sehingga penuding tetikus menggerakkan bilangan piksel tertentu.
Menggunakan kaedah interaksi boleh diseretSemua kaedah yang ditakrifkan untuk interaksi Boleh diseret adalah sebahagian daripada set kaedah asas yang telah anda lihat semasa melihat widget. Tiada kaedah khusus untuk interaksi Boleh Seret, jadi kami tidak akan membincangkannya secara terperinci. Senarai kaedah yang tersedia diberikan dalam jadual di bawah:
Menggunakan Peristiwa Interaksi Boleh SeretInteraction Draggable menyokong set ringkas acara yang memberitahu anda apabila elemen diseret. Peristiwa ini diterangkan dalam jadual di bawah:
Seperti acara widget, acara ini juga boleh dijawab. Contoh pengendalian acara mula dan berhenti diberikan di bawah:
... #draggable (font-size: x-large; border: thin solid black; width: 190px; text-align: center; padding:10px) $(function() ($("#draggable").draggable( ( mula: function() ($("#draggable").text("Seret saya..."), stop: function() ($("#draggable").text("Seret saya") ) )) ; )); Seret saya contoh Jalankan
Contoh ini menggunakan acara mula dan henti untuk menukar kandungan teks elemen semasa ia diseret. Kelebihan ini disebabkan oleh fakta bahawa interaksi Draggable dilaksanakan sepenuhnya menggunakan HTML dan CSS: anda boleh menggunakan jQuery untuk menukar keadaan elemen boleh seret walaupun ia bergerak merentasi skrin.
Menggunakan Interaksi Boleh DilepaskanMenyeret elemen sahaja mungkin mencukupi dalam sesetengah situasi, tetapi ia paling berguna apabila digunakan bersama dengan interaksi Droppable.
Elemen yang telah digunakan interaksi Droppable (elemen penerima) mendapat keupayaan untuk menerima elemen alih yang dibuat menggunakan interaksi Draggable.
Elemen penerima dicipta menggunakan kaedah droppable(), tetapi untuk mendapatkan kefungsian berguna anda perlu mencipta pengendali acara daripada yang ditakrifkan untuk jenis interaksi ini. Acara yang tersedia ditunjukkan dalam jadual di bawah:
| cipta | Berlaku apabila interaksi Droppable digunakan pada elemen |
| aktifkan | Berlaku apabila pengguna mula menyeret elemen yang dialihkan |
| nyahaktifkan | Berlaku apabila pengguna berhenti menyeret elemen yang dialihkan |
| habis | Berlaku apabila pengguna menyeret elemen boleh terapung ke atas elemen penerima (dengan syarat butang tetikus belum dikeluarkan) |
| keluar | Berlaku apabila pengguna menyeret elemen yang dialihkan ke luar elemen penerima |
| jatuhkan | Berlaku apabila pengguna meninggalkan elemen yang dialihkan pada elemen penerima |
Contoh mencipta elemen penerimaan mudah yang mana pengendali acara jatuh tunggal ditakrifkan diberikan di bawah:
... #draggable, #droppable (font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;) #droppable (padding) : 20px; kedudukan: mutlak; kanan: 5px;) $(function() ($("#draggable").draggable(); $("#droppable").droppable(( drop: function() ($(" #draggable").text("Kiri") ) )); )); Tinggalkan saya di sini Drag me Run contoh
Contoh ini menambahkan elemen div pada dokumen yang kandungan teksnya diwakili oleh rentetan "Tinggalkan di sini." Kami memilih elemen ini menggunakan jQuery dan memanggil kaedah droppable(), memberikannya objek tetapan yang mentakrifkan pengendali untuk acara drop. Sambutan kepada acara ini adalah untuk menukar teks elemen yang dialihkan menggunakan kaedah text().
Interaksi Seret dan lepas yang dibuat dalam contoh ini adalah mudah, tetapi ia menyediakan konteks yang berguna untuk menerangkan cara interaksi Boleh Seret dan Boleh Lepas berfungsi bersama. Pelbagai peringkat proses menyeret elemen digambarkan dalam rajah:
Semuanya kelihatan sangat mudah. Kami menyeret elemen yang dialihkan sehingga ia berada di atas elemen penerima dan melepaskannya. Unsur yang digugurkan kekal di tempat ia ditinggalkan, dan kandungan teksnya berubah sebagai tindak balas kepada peristiwa pengguguran. Bahagian berikut menunjukkan cara menggunakan acara interaksi Droppable lain untuk meningkatkan pengalaman pengguna.
Pencahayaan objek penerima sasaranMenggunakan acara aktifkan dan nyahaktifkan, anda boleh menyerlahkan objek penerima sasaran apabila pengguna memulakan proses menyeret elemen. Dalam banyak situasi, idea ini sangat membuahkan hasil kerana ia memberikan pengguna panduan yang boleh dipercayai tentang elemen mana yang merupakan sebahagian daripada model seret dan lepas. Contoh yang sepadan diberikan di bawah:
... $(function() ($("#draggable").draggable(); $("#droppable").droppable(( drop: function() ($("#draggable").text("Kiri ") ), aktifkan: function() ($("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen")); ), nyahaktifkan: function() ($("#droppable" ").css("sempadan", "").css("warna latar belakang", ""); ) )); )); ... Jalankan contoh
Sebaik sahaja pengguna mula menyeret elemen, peristiwa aktifkan yang dikaitkan dengan elemen penerima kami dicetuskan dan fungsi pengendali menggunakan kaedah css() untuk menukar sifat CSS jidar dan warna latar belakang elemen tersebut. Akibatnya, elemen penerima sasaran diserlahkan, menunjukkan kepada pengguna bahawa terdapat hubungan antara elemen tersebut dan elemen yang dialihkan.
Acara nyahaktifkan digunakan untuk mengalih keluar nilai sifat CSS daripada elemen penerima dan mengembalikannya ke keadaan asalnya sebaik sahaja pengguna melepaskan butang tetikus. (Peristiwa ini berlaku apabila menyeret elemen berhenti, tidak kira sama ada elemen yang diseret dibiarkan pada elemen penerima atau tidak.) Proses ini digambarkan dalam rajah:
Teknologi seret dan lepas boleh dipertingkatkan dengan menambah pengendalian acara berulang-ulang. Peristiwa lebihan berlaku apabila 50% daripada elemen yang dialihkan berada pada mana-mana bahagian elemen penerima. Peristiwa keluar berlaku apabila elemen bertindih sebelum ini tidak lagi bertindih. Contoh tindak balas terhadap peristiwa ini diberikan di bawah:
$(function() ($("#draggable").draggable(); $("#droppable"). droppable(( drop: function() ($("#draggable").text("Kiri") ) , aktifkan: function() ($("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen")); ), nyahaktifkan: function() ($("#droppable"). css("sempadan", "").css("warna latar belakang", ""); ), over: function() ($("#droppable").css(( sempadan: "medium double red", backgroundColor : "merah" )); ), keluar: function() ($("#droppable").css("sempadan", "").css("warna latar belakang", ""); ) )); ) ); Jalankan contoh
Fungsi pengendali yang sama digunakan di sini seperti dalam contoh sebelumnya, tetapi dalam kes ini, ia dikaitkan dengan peristiwa over dan out. Apabila elemen penerima bertindih sekurang-kurangnya 50% daripada elemen yang dialihkan, ia disertakan dalam bingkai dan warna latar belakangnya berubah, seperti yang ditunjukkan dalam rajah:
Had 50% ini dipanggil ambang pertindihan (toleransi), yang nilainya boleh ditetapkan semasa mencipta elemen penerima, seperti yang akan ditunjukkan kemudian.
Menyediakan interaksi boleh jatuhkanInteraksi Droppable mempunyai beberapa sifat yang boleh anda ubah untuk menyesuaikan tingkah lakunya. Ciri-ciri ini disenaraikan dalam jadual di bawah:
| kurang upaya | Jika pilihan ini benar, maka fungsi interaksi Droppable dilumpuhkan pada mulanya. Nilai lalai adalah palsu |
| terima | Mengecilkan set elemen alih yang elemen penerima akan bertindak balas. Nilai lalai ialah *, yang sepadan dengan mana-mana elemen |
| activeClass | Mentakrifkan kelas yang akan diberikan sebagai tindak balas kepada acara aktifkan dan dialih keluar sebagai tindak balas kepada acara nyahaktifkan |
| hoverClass | Mentakrifkan kelas yang akan ditugaskan sebagai tindak balas kepada acara yang melebihi dan dialih keluar sebagai tindak balas kepada acara keluar |
| toleransi | Mentakrifkan tahap pertindihan minimum di mana peristiwa lebih berlaku |
Anda boleh mengehadkan set elemen boleh jatuh yang akan diterima oleh elemen dengan fungsi kebolehoperasian boleh jatuh dengan menggunakan pilihan terima. Nilai pilihan terima hendaklah ditetapkan kepada pemilih. Akibatnya, peristiwa interaksi boleh dilepaskan hanya akan berlaku jika elemen yang dialihkan sepadan dengan pemilih yang ditentukan. Contoh yang sepadan diberikan di bawah:
... .draggable, #droppable (font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;) #droppable (padding : 20px; kedudukan: mutlak; kanan: 5px;) $(function() ( $(".draggable").draggable(); $("#droppable").droppable(( drop: function(event, ui) ( ui.draggable.text("Kiri") ), aktifkan: function() ($("#droppable") () ($("#droppable").css("border", "").css("background-color", ""); ), accept: "#drag1" )); )); Tinggalkan di sini Contoh Element 1 Element 2 Run
Dalam contoh ini terdapat dua elemen boleh seret dengan ID seret1 dan seret2. Apabila mencipta elemen penerima, kami menggunakan pilihan terima, yang mana kami menunjukkan bahawa hanya elemen seret1 akan menjadi elemen yang boleh diterima untuk dialihkan.
Apabila anda menyeret elemen seret1, anda akan melihat kesan yang sama seperti dalam contoh sebelumnya. Pada masa yang sesuai, acara aktifkan, nyahaktifkan, selesai dan keluar akan dicetuskan untuk elemen penerima. Pada masa yang sama, jika anda menyeret elemen seret2 yang tidak sepadan dengan pemilih yang dinyatakan dalam parameter terima, maka peristiwa ini tidak akan dicetuskan. Elemen ini boleh dialihkan secara bebas, tetapi ia tidak akan dapat dilihat oleh elemen penerima.
Perhatikan perubahan dalam cara kami memilih elemen boleh terapung yang boleh diterima untuk memanggil kaedah text(). Apabila terdapat hanya satu elemen bergerak dalam dokumen, atribut id sudah cukup untuk ini:
Jatuhkan: function() ($("#draggable").text("Kiri") ),
Dalam contoh ini, terdapat dua elemen boleh terapung, dan memilih dengan atribut id tidak akan menghasilkan hasil yang diingini, kerana teks dalam kes ini akan sentiasa berubah dalam elemen boleh terapung yang sama, tanpa mengira yang mana satu boleh diterima untuk elemen penerima.
Penyelesaiannya adalah dengan menggunakan objek ui, yang jQuery UI menyediakan sebagai hujah tambahan kepada setiap pengendali acara. Sifat boleh seret bagi objek ui mengembalikan objek jQuery yang mengandungi elemen yang pengguna seret atau cuba jatuhkan pada elemen sasaran, membenarkan elemen yang dikehendaki dipilih seperti ini:
Jatuhkan: fungsi(acara, ui) ( ui.draggable.text("Kiri") ),
Menukar ambang pertindihanSecara lalai, peristiwa lebih hanya berlaku apabila sekurang-kurangnya 50% daripada elemen yang dialihkan bertindih dengan elemen penerima. Jumlah pertindihan ambang ini boleh diubah menggunakan pilihan toleransi, yang boleh mengambil nilai yang ditunjukkan dalam jadual di bawah:
Dua nilai yang paling kerap saya gunakan ialah fit dan touch kerana ia paling masuk akal kepada pengguna. Saya menggunakan fit apabila elemen yang diseret perlu kekal dalam kawasan elemen penerima yang telah dialihkan, dan sentuh apabila elemen yang diseret perlu kembali ke kedudukan asalnya (contoh akan diberikan di bawah). Contoh penggunaan parameter muat dan sentuh diberikan di bawah:
Nilai klon memberitahu UI jQuery untuk membuat salinan elemen yang dialihkan, bersama-sama dengan semua kandungannya, dan menggunakan hasil yang terhasil sebagai elemen pembantu. Hasilnya ditunjukkan dalam rajah:
Elemen pembantu dialih keluar apabila pengguna melepaskan butang tetikus ke atas elemen yang dialihkan, meninggalkan elemen dipindahkan dan elemen penerima dalam kedudukan asalnya.
Seperti yang ditunjukkan dalam rajah, elemen asal yang dialihkan kekal di tempatnya dan hanya elemen tambahan yang bergerak di sekeliling skrin mengikut penuding tetikus. Jika saiz elemen yang dialihkan adalah besar, seperti dalam contoh kami, maka ia meliputi seluruh elemen dokumen, sehingga sukar bagi pengguna untuk menjejaki kedudukan elemen penerima. Masalah ini boleh diatasi dengan menyediakan fungsi sebagai nilai pilihan pembantu, seperti yang ditunjukkan dalam contoh di bawah:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ... Jalankan contoh
Apabila pengguna mula menyeret elemen, UI jQuery memanggil fungsi yang ditentukan oleh parameter pembantu dan menggunakan elemen yang dikembalikan sebagai objek untuk diseret. Dalam kes ini, saya menggunakan jQuery untuk mencipta elemen img. Hasilnya ditunjukkan dalam rajah:
Imej kecil bertindak sebagai proksi untuk elemen yang dialihkan, menjadikannya lebih mudah untuk menjejaki elemen lain dalam dokumen.
Objek ui yang jQuery UI hantar ke peristiwa interaksi Droppable mengandungi sifat pembantu dan sifat ini boleh digunakan untuk memanipulasi pembantu semasa ia diseret. Contoh menggunakan harta ini bersama-sama dengan acara lebih dan keluar diberikan di bawah:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , keluar: function(event, ui) ( ui.helper.css("sempadan", "") ) )); )); ...
Di sini peristiwa over dan out serta sifat ui.helper digunakan untuk memaparkan sempadan di sekeliling elemen pembantu apabila ia bertindih dengan elemen penerima. Hasilnya ditunjukkan dalam rajah:
Menggunakan pilihan snap, anda boleh memastikan bahawa elemen yang dialihkan "tertarik" ke tepi elemen di sebelah mana ia dilalui. Pilihan ini menerima pemilih sebagai nilai. Elemen yang dialihkan akan menyentap ke tepi mana-mana elemen yang sepadan dengan pemilih yang ditentukan. Contoh menggunakan pilihan snap diberikan di bawah:
Jalankan contoh UI jQuery #snapper, .draggable, .droppable (saiz fon: besar; sempadan: hitam pepejal sederhana; padding: 4px; lebar: 150px; penjajaran teks: tengah; warna latar belakang: kelabu muda; margin bawah: 10px ;).droppable (margin-kanan: 5px; tinggi: 50px; lebar: 120px) #dropContainer (kedudukan: mutlak; kanan: 5px;) rentang div (kedudukan: relatif; atas: 25%) .droppable.active (sempadan: hijau pepejal sederhana) .droppable.hover (warna latar belakang: hijau muda) #snapper (kedudukan: mutlak; kiri: 35%; sempadan: hitam pepejal sederhana; lebar: 180px; tinggi: 50px) $(function() ($(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "kedua-duanya", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "legar" ));)); Carta Snap sini Seret saya
Apabila elemen bergerak menghampiri salah satu elemen yang sesuai, ia, seolah-olah, "tertarik" kepadanya sedemikian rupa sehingga tepi bersebelahan mereka bersentuhan. Untuk pengikatan sedemikian, anda boleh memilih mana-mana elemen, bukan hanya elemen penerima. Dalam contoh ini, saya menambah elemen div dan menetapkan pilihan snap kepada nilai yang memilih elemen tersebut serta elemen penerima dalam dokumen.
Terdapat beberapa pilihan pembantu yang membolehkan anda menyesuaikan tingkah laku penambat elemen dengan lebih tepat. Salah satunya ialah pilihan snapMode. Dengan bantuannya, anda boleh menentukan jenis pengikatan. Nilai berikut dibenarkan: dalaman(sentap ke tepi dalaman elemen), luar(sentap ke tepi luar unsur) dan kedua-duanya(snap ke semua tepi; lalai).
Pilihan snapTolerance membolehkan anda menentukan sejauh mana elemen terapung mesti menghampiri tepi elemen sasaran sebelum snap berlaku. Nilai lalai ialah 20, yang bermaksud 20 piksel. Contoh menggunakan nilai 50, yang sepadan dengan snap pada jarak yang lebih besar. Adalah sangat penting untuk memilih nilai yang betul untuk pilihan ini. Jika nilai snapTolerance terlalu rendah, pengguna mungkin tidak perasan kesan snap, dan jika ia terlalu tinggi, elemen yang dialihkan akan mula membuat lompatan yang tidak dijangka, menyentap ke elemen yang jauh.
Baru-baru ini saya mempunyai idea untuk mula membangunkan permainan untuk Android. Sebagai permulaan, saya memutuskan untuk menulis catur. Pada pandangan saya, teknologi Drag and Drop akan sesuai untuk melaksanakan mekanisme untuk menggerakkan angka. Bagi yang belum tahu, saya perhatikan bahawa kaedah seret dan lepas ialah keupayaan untuk menyeret satu objek grafik ke objek lain dan melakukan satu atau tindakan lain selepas melepaskannya. Contoh paling mudah ialah memadamkan pintasan dari desktop PC anda dengan menyeretnya ke tong sampah. Dengan "membuang" label ke dalam tong sampah, kami memberitahu sistem bahawa kami ingin memaksa kedua-dua objek ini berinteraksi. Sistem menerima isyarat kami dan memutuskan tindakan yang perlu diambil. Seret dan lepas telah meluas kerana kejelasan intuitifnya. Pendekatan ini disokong oleh pengalaman kami berinteraksi dengan objek dunia sebenar dan berfungsi dengan baik dalam persekitaran maya. Bagi catur, menggunakan seret dan lepas adalah lebih mudah dari segi teknologi untuk menentukan sel tempat pengguna menyeret sekeping, kerana tidak perlu mengira nombor sel dari koordinat titik pelepasan. Kerja ini akan diambil alih oleh mesin maya.
Menggunakan teknologi seret dan lepas membolehkan saya menyelesaikan tiga masalah dengan sedikit usaha:
Tugasan telah digariskan, mari kita mula melaksanakannya.
Penggantian ImageView pada sentuhanSemua bentuk saya ialah objek ImageView. Malangnya, ternyata pelaksanaan Drag & Drop dalam Android tidak membenarkan "terus keluar dari kotak" untuk menggantikan imej objek apabila ia disentuh. Walau bagaimanapun, tugas ini boleh diselesaikan sepenuhnya menggunakan API. Kami perlu melakukan beberapa langkah mudah:
Tindakan ini mesti dilaksanakan dalam pengendali OnTouchListner bagi objek ImageView. Untuk melakukan ini, mari kita ganti kaedah onTouch:
@ Override public boolean onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ); View. DragShadowBuilder dsb= new View. DragShadowBuilder (lihat) ; lihat. startDrag(clipData, dsb, view, 0 ); view. setVisibility(View. GHAIB); kembalikan benar ; ) else ( return false ; ) )Semuanya sangat mudah. Jadi, kami telah menyelesaikan penggantian imej, mari kita beralih kepada tugas seterusnya.
Mengehadkan kawasan seret untuk fungsi seret jatuhTerdapat masalah dengan mengehadkan kawasan seretan. Intinya ialah jika anda melepaskan sekeping di luar papan, peristiwa jatuh tidak akan berlaku, kerana pengguna mengeluarkan objek dalam ruang kosong, dan tiada apa-apa untuk objek berinteraksi dengannya. Akibatnya, angka itu tidak akan kembali ke keadaan asalnya dan akan kekal tersembunyi selama-lamanya. Saya menghabiskan banyak masa membaca dokumentasi, tetapi saya masih tidak dapat mencari cara untuk mengehadkan kawasan seret dan lepas objek. Wawasan datang secara tiba-tiba. Saya tidak perlu mengehadkan sama sekali, saya perlu tahu sama ada pengguna mengeluarkan bentuk dengan betul atau tidak.
Menentukan Pelepasan Betul
Saya menemui jawapan kepada soalan saya dalam bahagian "mengendalikan acara tamat seretan" di tapak web Pembangun Android. Berikut adalah beberapa perkara penting:
Jadi saya perlu memintas acara ACTION_DRAG_ENDED dan memanggil kaedah getResult. Jika ia kembali palsu, maka pengguna telah menyeret sekeping dari papan dan saya perlu menetapkan ImageView kepada mod boleh dilihat.
@ Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent. ACTION_DROP& amp;& amp; mengandungiDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) private boolean dropEventNotHandled(DragEvent get dragEvent)(return get !sulEventEvent) ) ;)Kini pengguna boleh melepaskan angka itu di mana-mana sahaja, dan tiada perkara buruk akan berlaku.
Definisi pergerakan yang sahBahagian terakhir artikel dikhaskan untuk menyemak kesahihan langkah yang cuba dilakukan oleh pengguna. Sebelum membincangkan topik ini secara terperinci, saya akan membuat nota ringkas menerangkan struktur permohonan saya. Papan catur diwakili sebagai TableLayout, dan setiap sel adalah anak kepada LinearLayout dan mempunyai OnDragListener.
Di samping itu, setiap OnDragListener merujuk kepada objek "pengantara", yang menjaga interaksi objek permainan dan mengingati kedudukan sel semasa.
Apabila pengguna menyeret sekeping ke atas sel, tindakan berikut boleh dilakukan:
Di bawah ialah kod yang melaksanakan logik yang diterangkan
@ Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) ) else if (dragAction= = DragEvent.ACTION_DROP& amp;& amp; mengandungiDragable) ( semakForValidMove((ChessBoardSquareLayoutView) paparan, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) kembalikan benar ; )Seperti yang anda lihat, tidak kira sama ada langkah itu sah atau tidak, ImageView dipindahkan ke keadaan yang boleh dilihat. Saya mahu pengguna melihat bentuk bergerak. Saya nyatakan sebelum ini bahawa sel adalah anak kepada LayoutView. Ini dilakukan untuk memudahkan anda mengalihkan ImageView dari sel ke sel. Di bawah ialah kod untuk kaedah checkForValidMove, yang menunjukkan cara ImageView bergerak.
private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Graviti. PUSAT) ; lihat. showAsLanded() ; mediator. handleMove(view) ; ) )Saya harap artikel ini akan membantu anda apabila membangunkan projek anda sendiri.
Di mana elemen GUI dilaksanakan menggunakan pseudografik) menggunakan tetikus atau skrin sentuh.
Kaedah ini dilaksanakan dengan "menangkap" (dengan menekan dan menahan utama ( pertama, biasanya butang kiri tetikus) objek yang dipaparkan pada skrin komputer, tersedia secara pemrograman untuk operasi sedemikian, dan mengalihkannya ke tempat lain (untuk menukar lokasi) atau "melemparkannya" ke elemen lain (untuk memanggil tindakan sepadan yang disediakan mengikut program). Berhubung dengan tingkap (juga mampu bergerak dengan cara yang sama), istilah ini biasanya tidak digunakan.
Tindakan asas dan contoh paling mudah bagi tindakan drag-and-drop ialah: memindahkan objek, memindahkan objek dari panel ke panel, walaupun dalam sistem pengendalian moden drag-and-drop digunakan secara meluas dan merupakan salah satu cara utama untuk berinteraksi dengan komputer dalam pengguna antara muka grafik.
Objek untuk bergerak boleh menjadi elemen antara muka berikut: Ikon desktop, bar alat terapung, pintasan program dalam Bar Tugas (bermula dengan Win XP), elemen TreeView, rentetan teks, sel DataGridView, juga elemen OLE. Objek boleh bergerak dalam kawasan tertentu, dalam satu tetingkap, antara panel satu tetingkap dan antara tetingkap yang berbeza.
Acara seret mesti dicetuskan oleh beberapa tindakan pengguna. Selalunya, tindakan ini menekan butang kiri tetikus pada elemen (acara ini dipanggil MouseDown), yang boleh dialihkan dalam bekasnya. Sesetengah komponen mempunyai acara permulaan drag-n-drop mereka sendiri - contohnya, TreeView mempunyai acara ItemDrag.
Yayasan Wikimedia. 2010.
Lihat apa "Seret dan lepas" dalam kamus lain:Seret dan lepas - 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (dalam eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [engl. seret „ziehen“ + dan „und“ + lepaskan „jatuh… … Universal-Lexikon
Satu bentuk melakukan sebarang tindakan dalam antara muka pengguna grafik, yang melibatkan penggunaan tetikus komputer. Diterjemah dari bahasa Inggeris ia bermaksud: seret dan buang. Tindakan dilakukan dengan beroperasi boleh dilihat pada skrin... ... Kamus istilah perniagaan
seret dan lepas - (pengkomputeran) Untuk mengalihkan ikon, fail, dll merentasi skrin menggunakan tetikus dan melepaskannya di tempat yang berbeza (kata sifat seret dan lepas) Entri Utama: seret … Kamus bahasa Inggeris yang berguna
seret dan lepas - IT untuk mengalihkan sesuatu dari satu kawasan skrin komputer ke kawasan lain menggunakan tetikus: »Perisian ini membolehkan anda menyeret dan melepaskan elemen untuk imej halaman, teks, dsb. di mana sahaja anda mahu. Entri Utama: seret…Syarat kewangan dan perniagaan
drag-and-drop - kata kerja AS UK n.; Jen.: ; Pl.: unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (dalam eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird )
