Cara termudah adalah mengambil sesuatu dan meletakkannya, daripada menulis, apa yang harus diambil dan di mana meletakkannya. Tentu saja, tanpa mouse, atau perangkat serupa, Anda tidak dapat memilih apa pun dan tidak menunjukkan apa pun, tetapi bahkan dalam keadaan saat ini, penggunaan gagasan "seret dan lepas" sangat alami dan nyaman.

Bidang penerapan ide jauh dari hanya toko online, perpustakaan elektronik, mesin pencari atau Sistem Informasi, tetapi juga bidang yang diterapkan. Idenya sangat aplikatif dalam pengembangan situs dan elemennya, dibuat dan dipelihara secara interaktif, tanpa partisipasi seorang programmer.

Deskripsi ide

Pilih, pindahkan, dan tempatkan - idenya alami dan nyaman. Sungguh menakjubkan bahwa itu tidak lahir ketika mouse menjadi aksesori komputer yang sangat diperlukan.

Contoh paling nyata adalah memilih produk di toko online. Mengambil produk yang diinginkan dengan mouse dan menyeretnya ke keranjang belanja itu sederhana, alami, dan nyaman. Mengunggah file: Mengambil dokumen di luar jendela browser dan menempatkannya di elemen halaman, dengan demikian memulai transfer dokumen ke server, juga merupakan ide praktis.

Untuk pengembang, ide "seret dan lepas" adalah manipulasi elemen halaman tanpa menghitung ulang koordinat dan ukuran tag secara manual, kemampuan untuk memilih beberapa elemen dan menyelaraskannya, serta memindahkan sisi tag blok.

HTML dan CSS- bahasa yang bagus deskripsi tag dan gaya desainnya, tetapi ketika pengembang memiliki kemampuan untuk memanipulasi elemen halaman secara interaktif tanpa menghitung ulang koordinat dan ukuran secara manual, ini membuat pekerjaan lebih nyaman dan efisien.

Transfer file mudah

"Seret dan lepas": terjemahan dari bahasa Inggris ke bahasa Rusia secara harfiah terdengar "seret dan lepas". Dalam praktiknya, kedengarannya dan berfungsi lebih baik: pilih, transfer, dan lepaskan - sederhana dan alami.

Hal ini sangat sederhana untuk diterapkan pada halaman mentransfer file ke halaman, ke server atau untuk penggunaan lain.

Dalam contoh ini, beberapa file di desktop dipilih dengan mouse (gambar kiri). Pada pemilihan, tombol kiri mouse ditekan dan yang dipilih "pergi" ke keranjang. Browser itu sendiri menunjukkan bagaimana ini terjadi, menulis petunjuk "salin" dan membuat garis besar file yang akan dipindahkan.

Ketika mouse berada di atas keranjang, pengunjung melepaskan tombol kiri mouse, peristiwa drag-and-drop terjadi, dan pada halaman situs (gambar bawah) kode JavaScript dapat menerima dan memproses semua file yang pengunjung disediakan ke halaman (situs).

Deskripsi Implementasi

Kode yang melakukan prosedur ini sangat sederhana. Bahkan pengembang pemula dapat mengulanginya dalam kasus penggunaan apa pun.

Di sini antarmuka pengguna diwakili oleh dua tag: scPlaceFile (ini adalah keranjang itu sendiri, tempat Anda perlu meletakkan file) dan scPlaceFiles (ini adalah hasil pemrosesan file, dalam hal ini daftarnya).

Logika halamannya adalah sebagai berikut. Saat halaman dimuat di browser, event handler "ondrop" ditugaskan di keranjang - untuk menempatkan, sisa acara diblokir dan tidak digunakan.

Halaman berfungsi normal, tetapi segera setelah pengunjung memilih file dan menyeretnya ke gambar keranjang, yaitu, ke tag scPlaceFile, pemrosesan acara "file tiba" akan dimulai.

Handler ini hanya menampilkan daftar file. Nomornya ada di event.dataTransfer.files.length, dan informasi tentang setiap file ada di event.dataTransfer.files [i] .name. Apa yang harus dilakukan dengan data yang diterima ditentukan oleh pengembang, dalam hal ini, daftar file yang diterima hanya dibentuk.

Setelah diproses, acara diblokir dan tidak disebarkan. Ini diperlukan agar browser tidak bekerja sendiri dan tidak mengganggu pemrosesan informasi yang diterima.

DnD dan data eksternal

Mengunggah gambar ke server menggunakan drag and drop adalah praktik umum dalam teknologi ini. Biasanya, pengembang membuat formulir unggah file (1) yang berfungsi dengan cara biasa (2). Pengunjung bisa masuk mode normal pilih file dan unggah.

Namun, jika pengunjung ke tempat tertentu pada formulir melakukan "drag and drop", maka kolom nama file akan terisi secara otomatis.

Ini keputusan yang bagus... Tentu saja, sangat sulit untuk mengakui bahwa tidak ada mouse di komputer. Tetapi lebih baik untuk merancang antarmuka pengguna secara teratur dan dalam implementasi DnD.

DnD dan data internal

Menjaga kepentingan pengunjung selalu penting, tetapi kepentingan pengembang juga penting. Seret dan lepas dapat diimplementasikan tidak hanya dengan cara standar, tetapi juga dengan menangani peristiwa mouse pada elemen halaman.

Tugas menghitung nilai koordinat tag dan ukurannya muncul terus-menerus. Perhitungan manual adalah praktik yang baik, tetapi opsi interaktif lebih nyaman. Semua tag selalu berbentuk persegi panjang, dan dengan melacak aktivitas mouse di sisi elemen, Anda dapat membuat kemampuan untuk memindahkan elemen secara otomatis ke tempat yang tepat di halaman, atau mengubahnya.

Menangani acara mengklik tombol mouse - menyimpan koordinat tempat klik, misalnya, salah satu sisi elemen. Gerakkan mouse - sisi bergerak ke arah yang diinginkan. Melepaskan tombol mouse - sisi berhenti dan koordinatnya berubah. Dengan cara ini Anda dapat mengubah posisi elemen atau ukurannya.

Ini tidak secara formal "seret dan lepas", tetapi efeknya serupa dan praktis. Dengan membuat penangan universal untuk elemen halaman apa pun, Anda bisa mendapatkan hasil interaktif yang baik, mempercepat pengembangan, dan menyederhanakan kode Anda.

Pemrograman visual dan manual

Mouse di komputer dan jari di smartphone adalah pendekatan yang sama sekali berbeda untuk mengimplementasikan antarmuka pengguna (pengunjung, pengembang). Ini adalah persyaratan alami dan modern untuk kompatibilitas lintas-browser.

Semua ini bersama-sama membuat sulit untuk membuat halaman, tetapi menerapkan gagasan "seret dan lepas" di dalamnya bentuk standar menggunakan acaranya, menggabungkan ide ini dengan acara biasa pada elemen, Anda dapat menerapkan mekanisme di mana pembuatan halaman akan terjadi secara visual.

Sekarang mari kita lihat pemilihan item atau item. Fakta seleksi adalah tampilan menu konteks, misalnya, tujuannya adalah untuk menyelaraskan yang dipilih (kiri, kanan, tengah), atau mendistribusikan elemen secara vertikal atau horizontal dengan langkah yang sama, atau mengubah ukurannya (minimum, maksimum) .

Perhitungan ulang koordinat dan dimensi secara otomatis lebih disukai daripada perhitungan ulang manual. Lebih sedikit kesalahan - tujuannya tercapai lebih cepat. Selain itu, Anda dapat membuat halaman dalam satu browser, menyimpan posisi dan ukuran elemen. Setelah membuka halaman ini di ponsel cerdas, Anda dapat mengoreksi nilai koordinat dan dimensi dan mengingatnya untuk model tertentu versi smartphone atau browser.

Jadi halaman yang sama tanpa kepatuhan manual dengan persyaratan lintas-browser akan memiliki data yang berbeda untuk ditampilkan perangkat yang berbeda dan di berbagai browser.

Jika Anda mengizinkan pengunjung untuk melakukan prosedur ini sendiri, serta memilih elemen halaman yang diperlukan dari antara yang disediakan oleh pengembang, Anda dapat memastikan kompatibilitas lintas-browser dan fungsionalitas halaman yang diperlukan, dengan mempertimbangkan pendapat pengguna .

Drag and Drop dapat membantu meningkatkan kinerja iPad Anda. Inilah cara Anda dapat menggunakannya.

Jadi Anda dapat memindahkan file dari satu layanan penyimpanan cloud ke yang lain, menyalin teks dari Safari ke aplikasi pengeditan teks untuk menambahkan kutipan atau membuat cadangan foto tertentu dalam aplikasi penyimpanan file.

Cara menarik dan melepas foto, file, dan teks

1. Sentuh dan tahan foto, file, atau teks yang disorot yang ingin Anda seret ke aplikasi lain.

2. Seret item ke lokasi yang diinginkan di lampiran ini atau yang lain yang Anda buka dalam mode "Slide Over" atau "Split View" dan lepaskan.

Cara menarik dan melepas banyak foto atau file secara bersamaan

1. Sentuh dan tahan salah satu foto atau file yang ingin Anda seret.

2. Saat menyeret item saat ini, ketuk foto atau file lain yang juga ingin Anda seret. Lakukan lagi dengan item sebanyak yang Anda ingin pindahkan.

3. Seret semua objek yang dipilih ke lokasi yang ditentukan di aplikasi lain yang Anda buka di Slide Over atau Split View dan lepaskan.

Cara menyeret teks dari satu aplikasi ke aplikasi lain

1. Sentuh dan tahan bagian teks yang ingin Anda seret untuk memilihnya.

2. Gunakan titik pilihan untuk memilih sisa teks yang ingin Anda seret.

3. Tekan dan tahan teks yang disorot.

4. Seret teks ke dalam aplikasi tempat Anda ingin meletakkannya dan lepaskan.

Cara mengubah susunan ikon beberapa aplikasi sekaligus menggunakan "Drag and Drop"

Sementara sebagian besar fungsionalitas drag-and-drop di iOS hanya berfungsi di iPad, trik ini benar-benar berfungsi di iPhone dan iPad. Ini memungkinkan Anda untuk mengatur pengaturan aplikasi di layar beranda menggunakan « Seret dan Jatuhkan ”daripada memindahkannya satu per satu.

1. Tekan dan tahan ikon aplikasi yang ingin Anda ubah posisinya di layar beranda.

2. Ketuk aplikasi tambahan yang ingin Anda pindahkan juga.

3. Seret aplikasi ini ke halaman atau folder yang Anda inginkan dan lepaskan.

182

Dalam contoh ini, kami memilih elemen div dan membuatnya mengapung dengan memanggil metode yang dapat diseret ()... Seperti yang ditunjukkan pada gambar di bawah, dalam dokumen yang dibuka, elemen mengambil posisi normal, tetapi setelah itu dapat dipindahkan dengan penunjuk mouse ke tempat mana pun di jendela browser:

Fitur drag-and-drop berguna sendiri, tetapi bahkan lebih berguna bila digunakan bersama dengan interaksi Droppable, yang dijelaskan di bawah ini.

Interaksi Draggable diimplementasikan hanya melalui penggunaan markup HTML dan gaya CSS tertentu. Ini berarti bahwa fungsi ini akan berfungsi di hampir semua browser, tetapi elemen yang diberkahinya tidak akan dapat bekerja dengan alat seret dan lepas asli yang serupa. sistem operasi.

Operasi drag-and-drop yang ditentukan oleh spesifikasi HTML5 biasanya diimplementasikan menggunakan mekanisme asli sistem operasi. Jika Anda menggunakan mekanisme Drag-and-drop jQuery UI, yang terbaik adalah mematikan HTML5 yang setara untuk menghindari konflik. Untuk tujuan ini, atur atribut yang dapat diseret dari elemen badan dokumen ke false.

Mengonfigurasi Interaksi yang Dapat Diseret

Ada banyak opsi penyesuaian untuk interaksi Draggable. Properti yang paling penting, yang dibahas dalam bagian berikut, diringkas dalam tabel di bawah ini:

Properti Interaksi yang Dapat Diseret

Properti	Keterangan
sumbu	Membatasi gerakan ke arah tertentu. Defaultnya adalah false, yang berarti tidak ada batasan, tetapi Anda juga dapat menentukan nilai "x" (bergerak sepanjang sumbu X saja) atau "y" (bergerak sepanjang sumbu Y saja)
penahanan	Membatasi posisi elemen melayang ke area layar tertentu. Jenis nilai yang didukung dijelaskan dalam tabel di bawah ini, menggunakan contoh yang sesuai. Standarnya salah, yang berarti tidak ada batasan
menunda	Menentukan berapa lama elemen harus diseret sebelum bergerak. Standarnya adalah 0, yang berarti tidak ada penundaan
jarak	Menentukan jarak pengguna harus menyeret elemen dari posisi awal sebelum benar-benar bergerak. Standarnya adalah 1 piksel
kisi-kisi	Memaksa gertakan elemen yang dipindahkan ke sel kisi. Defaultnya salah, yang berarti tidak ada ikatan

Membatasi arah gerakan

Ada beberapa cara di mana Anda dapat membatasi pergerakan elemen ke arah tertentu. Yang pertama adalah menggunakan opsi sumbu untuk membatasi arah gerakan ke sumbu X atau Y. Contoh ditunjukkan di bawah ini:

...

Jalankan contoh

Dalam contoh ini kita mendefinisikan dua elemen div, pilih dengan menggunakan jQuery dan panggil metode yang dapat diseret (). Sebuah objek diteruskan ke metode ini sebagai argumen, yang awalnya membatasi pergerakan kedua div ke arah sepanjang sumbu X. Kemudian menerapkan metode filter jQuery (), kita dapat memilih elemen dragV tanpa jQuery mencari lagi di seluruh dokumen dan atur ke arah gerakan lain yang diizinkan - sepanjang sumbu Y, yang memberi kita dokumen di mana satu div hanya dapat diseret secara vertikal dan yang lainnya hanya secara horizontal. Hasilnya ditunjukkan pada gambar:

Membatasi jangkauan pergerakan elemen

Anda juga dapat membatasi area layar tempat item dapat diseret. Opsi penahanan digunakan untuk ini. Format nilai yang dapat ditentukan dalam opsi ini dijelaskan dalam tabel di bawah ini:

Contoh penggunaan opsi penahanan ditunjukkan di bawah ini:

...

Jalankan contoh

Dalam contoh ini, pergerakan kedua elemen dibatasi sehingga hanya dapat diseret ke dalam elemen induk, yang merupakan div berukuran tetap. Untuk salah satu div yang dapat mengapung menggunakan opsi sumbu yang diperkenalkan pembatasan tambahan, yang hanya dapat bergerak secara horizontal di dalam elemen induk. Hasilnya diilustrasikan pada gambar:

Membatasi kemampuan item untuk berpindah ke sel grid

Opsi kisi memungkinkan Anda untuk mengatur jangkar item melayang ke sel kisi. Opsi ini mengambil nilai sebagai larik dua elemen yang menentukan lebar dan tinggi sel kisi dalam piksel. Contoh penggunaan opsi grid ditunjukkan di bawah ini:

...

Jalankan contoh

Contoh ini memiliki kisi dengan sel lebar 100 piksel dan tinggi 50 piksel. Saat Anda menyeret item, item itu "melompat" dari satu sel (tidak terlihat) ke sel lainnya. Efek gertakan adalah contoh yang sangat baik dari penggunaan fungsi interaksi, tetapi sulit untuk menyampaikannya menggunakan tangkapan layar.

Anda dapat membuat efek gertakan hanya untuk satu arah dengan menyetel Sumbu Gerak Bebas ke 1. Misalnya, jika Anda menyetel opsi kisi ke suatu nilai, item akan terjepit ke sel kisi selebar 100 piksel saat dipindahkan secara horizontal, tetapi itu bebas untuk bergerak secara vertikal.

Pindahkan penundaan

Ada dua opsi yang memungkinkan Anda untuk menunda saat menyeret item yang dipindahkan. Opsi penundaan dapat digunakan untuk mengatur jumlah waktu, dalam milidetik, bahwa pengguna harus menyeret mouse sebelum elemen benar-benar dipindahkan. Jenis penundaan lain disediakan oleh opsi jarak, yang menentukan jarak, dalam piksel, yang harus digeser oleh pengguna ke penunjuk tetikus sebelum elemen mengikuti.

Contoh penggunaan kedua pengaturan ditunjukkan di bawah ini:

...

Jalankan contoh

Dalam contoh ini, ada dua elemen yang dapat dipindahkan, salah satunya memiliki penundaan yang ditentukan menggunakan opsi penundaan, dan yang lainnya menggunakan opsi jarak.

Dalam kasus penundaan yang ditentukan oleh opsi penundaan, pengguna harus menyeret selama waktu tertentu sebelum benar-benar memindahkan elemen. Dalam contoh ini, durasi interval ini adalah 1000 ms. Sama sekali tidak perlu untuk menggerakkan mouse saat ini, tetapi selama seluruh periode penundaan tombol mouse harus tetap ditekan, setelah itu elemen dapat dipindahkan dengan menggerakkan mouse. Setelah waktu tinggal telah berlalu, item yang dipindahkan akan snap ke posisi penunjuk tetikus, tunduk pada batasan yang dikenakan oleh opsi kisi, wilayah, dan sumbu yang dibahas sebelumnya.

Opsi jarak memiliki efek yang serupa, tetapi dalam kasus ini pengguna harus menyeret penunjuk tetikus setidaknya sejumlah piksel yang ditentukan ke segala arah dari lokasi awal elemen. Kemudian item yang dipindahkan akan melompat ke lokasi penunjuk saat ini.

Jika Anda menerapkan kedua pengaturan ke elemen yang sama, maka elemen yang dipindahkan tidak akan bergerak sampai kedua kriteria penundaan terpenuhi, mis. sampai ada upaya untuk menyeret elemen untuk waktu yang ditentukan dan sampai penunjuk tetikus menggerakkan jumlah piksel yang ditentukan.

Menggunakan Metode Interaksi yang Dapat Diseret

Semua metode yang ditentukan untuk interaksi Draggable adalah bagian dari kumpulan metode dasar yang sudah Anda lihat saat melihat widget. Metode khusus untuk interaksi Draggable tidak disediakan, jadi kami tidak akan membahasnya secara detail. Daftar metode yang tersedia ditunjukkan pada tabel di bawah ini:

Menggunakan Acara Interaksi yang Dapat Diseret

Interaksi yang Dapat Diseret mendukung serangkaian peristiwa sederhana untuk memberi tahu saat item diseret. Peristiwa tersebut dijelaskan dalam tabel di bawah ini:

Seperti halnya acara widget, Anda juga dapat bereaksi terhadap acara ini. Contoh penanganan acara start dan stop ditunjukkan di bawah ini:

...

Jalankan contoh

Contoh ini menggunakan peristiwa mulai dan berhenti untuk mengubah konten teks dari suatu elemen saat sedang diseret. Peluang ini disebabkan oleh fakta bahwa interaksi Draggable diimplementasikan secara eksklusif menggunakan HTML dan CSS: Anda dapat menggunakan jQuery untuk mengubah status elemen melayang bahkan saat elemen tersebut bergerak melintasi layar.

Menggunakan Interaksi yang Dapat Dijatuhkan

Dalam beberapa situasi, kemampuan untuk menarik dan melepaskan elemen saja mungkin sudah cukup, tetapi paling berguna bila digunakan bersama dengan interaksi Droppable.

Item yang memiliki interaksi Droppable yang diterapkan (menerima item) memperoleh kemampuan untuk menerima item mengambang yang dibuat oleh interaksi Draggable.

Menerima item dibuat menggunakan droppable () metode tetapi untuk mendapatkan fungsionalitas yang berguna, Anda perlu membuat event handler dari yang ditentukan untuk jenis interaksi ini. Event yang tersedia dapat dilihat pada tabel di bawah ini:

Peristiwa interaksi yang dapat dijatuhkan

Peristiwa	Keterangan
membuat	Terjadi ketika interaksi Droppable diterapkan ke elemen
mengaktifkan	Terjadi ketika pengguna mulai menyeret item melayang
menonaktifkan	Terjadi saat pengguna berhenti menyeret item melayang
lebih	Terjadi ketika pengguna menyeret elemen melayang di atas elemen penerima (tetapi dengan asumsi mouse belum dilepaskan)
keluar	Terjadi ketika pengguna menyeret elemen melayang di luar elemen penerima
menjatuhkan	Terjadi ketika pengguna meninggalkan pelampung pada elemen penerima

Contoh membuat elemen penerima sederhana dengan penangan peristiwa drop tunggal ditunjukkan di bawah ini:

...

Jalankan contoh

Contoh ini menambahkan elemen div ke dokumen dengan konten teks yang diwakili oleh string "Tinggalkan di sini". Kami memilih elemen ini menggunakan jQuery dan memanggil metode droppable (), meneruskannya ke objek pengaturan yang mendefinisikan penangan untuk acara drop. Respon dari event ini adalah mengubah teks dari elemen melayang menggunakan metode text().

Interaksi drag-and-drop yang dibuat dalam contoh ini sangat mendasar, tetapi memberikan konteks yang nyaman untuk menjelaskan kemungkinannya. bekerja bersama interaksi Draggable dan Droppable. Tahapan yang berbeda dari proses drag-and-drop diilustrasikan pada gambar:

Semuanya terlihat sangat sederhana. Kami menyeret elemen melayang hingga melewati elemen penerima dan melepaskannya. Item yang dijatuhkan tetap berada di tempatnya, dan konten teksnya berubah sebagai respons terhadap peristiwa pelepasan. Bagian berikut menunjukkan cara menggunakan peristiwa interaksi Droppable lainnya untuk meningkatkan pengalaman pengguna.

Menyoroti objek penerima target

Menggunakan peristiwa aktifkan dan nonaktifkan, Anda dapat menyorot objek penerima target saat pengguna memulai proses menyeret. Dalam banyak situasi, ide ini sangat bermanfaat, karena memberikan indikasi yang andal kepada pengguna tentang elemen mana yang merupakan bagian dari model drag-and-drop. Contoh yang relevan diberikan di bawah ini:

... $(function() ($("# draggable"). draggable(); $("# droppable"). droppable ((drop: function() ($("# draggable").text ("Kiri ")), aktifkan: function() ($(" # droppable "). css ((border:" medium double green ", backgroundColor:" lightGreen "));), nonaktifkan: function () ($(" # droppable ") .css (" batas "," ") .css (" warna latar "," ");)));)); ... Jalankan contoh

Segera setelah pengguna mulai menyeret elemen, acara aktivasi diaktifkan - terkait dengan elemen penerima kami, dan fungsi pengendali menggunakan metode css () untuk mengubah Properti perbatasan CSS dan warna latar belakang elemen ini. Akibatnya, elemen penerima target disorot, menunjukkan kepada pengguna bahwa ada hubungan antara elemen itu dan elemen terapung.

Acara menonaktifkan digunakan untuk menghapus nilai properti CSS dari elemen penerima dan mengatur ulang ke keadaan semula segera setelah pengguna melepaskan tombol mouse. (Kejadian ini terjadi setiap kali menyeret elemen berhenti, apakah elemen yang diseret disimpan pada elemen penerima atau tidak.) Proses ini diilustrasikan pada gambar:

Penanganan Elemen yang Tumpang Tindih

Drag-and-drop dapat ditingkatkan dengan menambahkan penanganan event berulang-ulang. Acara lebih terjadi ketika 50% dari elemen melayang di atas setiap bagian dari elemen penerima. Peristiwa keluar terjadi ketika elemen yang sebelumnya tumpang tindih tidak lagi tumpang tindih. Contoh respons terhadap peristiwa ini ditunjukkan di bawah ini:

$ (fungsi () ($ ("# dapat diseret"). dapat ditarik (); $ ("# dapat ditarik"). dapat dijatuhkan ((dijatuhkan: fungsi () ($ ("# dapat ditarik"). teks ("Dijatuhkan")) , aktifkan: function() ($("# droppable").css ((border: "medium double green", backgroundColor: "lightGreen"));), nonaktifkan: function() ($("# droppable"). css ("border", "") .css ("background-color", "");), over: function () ($ ("# droppable").css ((border: "medium double red", backgroundColor : "merah"));), out: function() ($("# droppable").css ("border", "") .css ("background-color", "");)));) ); Jalankan contoh

Fungsi handler yang sama digunakan di sini seperti pada contoh sebelumnya, tetapi dalam kasus ini mereka terkait dengan peristiwa over dan out. Ketika setidaknya 50% dari elemen melayang tumpang tindih dengan elemen penerima, itu dibingkai dan warna latar belakangnya berubah seperti yang ditunjukkan:

Batas 50% yang ditentukan disebut ambang toleransi, yang dapat diatur saat elemen penerima dibuat, seperti yang ditunjukkan di bawah ini.

Pengaturan interaksi yang dapat dijatuhkan

Droppable memiliki sejumlah properti untuk interaksi yang dapat Anda ubah untuk menyesuaikan perilakunya. Properti ini tercantum dalam tabel di bawah ini:

Properti interaksi yang dapat dijatuhkan

Properti	Keterangan
dengan disabilitas	Jika opsi ini benar, maka fungsionalitas interaksi Droppable awalnya dinonaktifkan. Nilai defaultnya salah
menerima	Mempersempit kumpulan elemen mengambang yang akan ditanggapi oleh elemen penerima. Standarnya adalah *, cocok dengan elemen apa pun
kelas aktif	Mendefinisikan kelas yang akan ditugaskan sebagai respons terhadap peristiwa pengaktifan dan dihapus sebagai tanggapan terhadap peristiwa penonaktifan
kelas hover	Mendefinisikan kelas yang akan ditugaskan sebagai tanggapan atas peristiwa berlebih dan dihapus sebagai tanggapan atas peristiwa keluar
toleransi	Menentukan tingkat minimum tumpang tindih di mana peristiwa lebih terjadi

Membatasi Item Mengambang yang Diizinkan

Anda dapat membatasi kumpulan elemen floatable yang akan diterima oleh elemen yang memiliki fungsionalitas interoperabilitas Droppable menggunakan opsi accept. Opsi terima harus disetel ke pemilih. Akibatnya, peristiwa interaksi Droppable hanya akan terjadi jika item yang dijatuhkan cocok dengan pemilih yang ditentukan. Contoh yang relevan diberikan di bawah ini:

...

Jalankan contoh

Dalam contoh ini, ada dua elemen mengambang bernama drag1 dan drag2. Saat membuat elemen penerima, opsi terima digunakan, yang dengannya kami menunjukkan bahwa hanya drag1 yang akan menjadi elemen float yang dapat diterima.

Saat Anda menyeret drag1, Anda akan melihat efek yang sama seperti pada contoh sebelumnya. Aktivasi, nonaktifkan, over, dan out event akan menembak elemen penerima pada waktu yang tepat. Pada saat yang sama, jika Anda menyeret elemen drag2 yang tidak cocok dengan pemilih yang ditentukan dalam parameter accept, maka peristiwa ini tidak akan dipicu. Elemen ini dapat dengan bebas dipindahkan, tetapi tidak akan dirasakan oleh elemen penerima.

Perhatikan perubahan dalam cara Anda memilih float yang dapat diterima yang harus Anda panggil metode text(). Ketika hanya ada satu elemen yang dapat dipindahkan dalam dokumen, atribut id sudah cukup untuk ini:

Jatuhkan: fungsi () ($ ("# dapat diseret"). Teks ("Kiri")),

Dalam contoh ini, ada dua elemen float, dan memilih atribut id tidak akan menghasilkan hasil yang diinginkan, karena teks dalam kasus ini akan selalu berubah dalam elemen float yang sama, tidak peduli mana yang dapat diterima oleh elemen penerima.

Jalan keluarnya adalah dengan menggunakan objek ui yang disediakan jQuery UI sebagai argumen tambahan untuk setiap event handler. Properti draggable dari objek ui mengembalikan objek jQuery yang berisi elemen yang pengguna seret atau coba tinggalkan pada elemen target, memungkinkan elemen yang diinginkan untuk dipilih sebagai berikut:

Jatuhkan: fungsi (acara, ui) (ui.draggable.text ("Kiri")),

Mengubah ambang batas tumpang tindih

Secara default, over event hanya diaktifkan ketika setidaknya 50% elemen melayang tumpang tindih dengan elemen penerima. Nilai dari threshold overlap ini dapat diubah dengan menggunakan opsi tolerance, yang dapat mengambil nilai yang ditunjukkan pada tabel di bawah ini:

Dua nilai yang paling sering saya gunakan, pas dan sentuh, adalah yang paling mudah dipahami pengguna. Saya menggunakan nilai pas dalam kasus di mana elemen yang diseret harus tetap berada di area elemen penerima yang dipindahkan, dan nilai sentuh - ketika elemen yang dipindahkan harus kembali ke posisi semula (contoh akan diberikan di bawah ini ). Contoh menggunakan parameter fit and touch ditunjukkan di bawah ini:

Nilai kloning memberi tahu jQuery UI untuk membuat salinan elemen melayang, bersama dengan semua kontennya, dan menggunakan hasil itu sebagai elemen pembantu. Hasilnya ditunjukkan pada gambar:

Helper dihapus ketika pengguna melepaskan tombol mouse di atas elemen melayang, meninggalkan elemen melayang dan menerima di posisi aslinya.

Seperti yang ditunjukkan pada gambar, elemen mengambang asli tetap di tempatnya, dan hanya elemen tambahan yang bergerak di sepanjang layar mengikuti penunjuk mouse. Jika dimensi elemen yang dipindahkan besar, seperti pada contoh kita, maka elemen tersebut mencakup elemen dokumen lainnya, sehingga pengguna pun akan kesulitan melacak posisi elemen penerima. Anda dapat mengatasi masalah ini dengan menyediakan fungsi sebagai nilai untuk opsi pembantu, seperti yang ditunjukkan pada contoh di bawah ini:

... $(fungsi () ($("div.draggable") .. png "/>")))); $("# keranjang").droppable ((activeClass: "active", hoverClass: "hover")); )); ... Jalankan contoh

Saat pengguna mulai menyeret elemen, jQuery UI memanggil fungsi, diberikan oleh parameter helper, dan menggunakan elemen yang dikembalikan sebagai float. Dalam hal ini, saya menggunakan jQuery untuk membuat elemen img. Hasilnya ditunjukkan pada gambar:

Gambar kecil bertindak sebagai tempat untuk elemen mengambang, membuatnya lebih mudah untuk melacak elemen lain dalam dokumen.

Objek ui yang dikirim jQuery UI ke peristiwa interaksi Droppable berisi properti helper, dan properti ini dapat digunakan untuk memanipulasi helper saat sedang diseret. Contoh penggunaan properti ini dalam hubungannya dengan peristiwa over dan out ditunjukkan di bawah ini:

... $(fungsi () ($("div.draggable") .. png "/>")))); $ ("# keranjang"). droppable ((activeClass: "active", hoverClass: "hover", over: function (event, ui) (ui.helper.css ("border", "thick solid # 27e6ed")) , out: function (event, ui) (ui.helper.css ("border", "")))); )); ...

Di sini, peristiwa over dan out dan properti ui.helper digunakan untuk menampilkan batas di sekitar helper saat tumpang tindih dengan elemen penerima. Hasilnya ditunjukkan pada gambar:

Snap ke tepi elemen

Melalui opsi jepret Anda dapat mencapai bahwa elemen yang dipindahkan "tertarik" ke tepi elemen di sebelahnya yang dilewatinya. Opsi ini mengambil pemilih sebagai nilai. Elemen melayang akan menempel ke tepi elemen apa pun yang cocok dengan pemilih yang ditentukan. Contoh penggunaan opsi snap ditunjukkan di bawah ini:

Jalankan contoh

Ketika elemen yang dipindahkan mendekati salah satu elemen yang sesuai, itu seolah-olah "tertarik" padanya sedemikian rupa sehingga ujung-ujungnya yang berdekatan bersentuhan. Untuk pengikatan seperti itu, Anda dapat memilih elemen apa pun, bukan hanya elemen penerima. Dalam contoh ini, saya telah menambahkan elemen div dan mengatur opsi snap ke nilai yang memilih elemen yang diberikan dalam dokumen, serta elemen penerima.

Ada beberapa opsi pembantu yang memungkinkan Anda untuk menyempurnakan perilaku pengikatan elemen. Salah satunya adalah opsi snapMode... Ini dapat digunakan untuk menentukan jenis pengikatan. Nilai-nilai berikut diterima: batin(gertakan ke tepi bagian dalam elemen), luar(gertakan ke tepi luar elemen) dan keduanya(jepret ke semua tepi; default).

Opsi SnapTolerance memungkinkan Anda untuk menentukan seberapa jauh elemen melayang harus mendekati tepi elemen target sebelum gertakan terjadi. Standarnya adalah 20, yang berarti 20 piksel. Contoh menggunakan nilai 50, yang sesuai dengan gertakan pada jarak yang lebih jauh. Sangat penting untuk memilih nilai yang benar untuk opsi ini. Jika nilai snapTolerance terlalu kecil, pengguna mungkin tidak memperhatikan efek snap, dan jika terlalu besar, item yang dipindahkan akan mulai membuat lompatan tak terduga, menjentikkan ke item yang jauh.

Untuk perpustakaan VCL, Borland telah mengimplementasikan versi antarmuka Drag & Drop sendiri (diterjemahkan sebagai "drag and drop"). Antarmuka ini internal - Anda dapat mengirim dan menerima elemen kontrol Delphi apa pun di dalam formulir "(kecuali untuk formulir itu sendiri). Ini diimplementasikan tanpa menggunakan fungsi Windows API yang sesuai - mereka harus digunakan saat mengatur komunikasi dengan tugas lain dengan menyeret dan jatuhan.

Dengan menekan tombol kiri mouse di atas kontrol, kita dapat "menyeretnya" ke kontrol lain. Dari sudut pandang pemrogram, ini berarti bahwa pada saat menyeret dan melepaskan kunci, peristiwa tertentu dihasilkan, yang mengirimkan semua informasi yang diperlukan - penunjuk ke objek yang diseret, koordinat kursor saat ini, dll. saat ini kursor berada. Handler untuk kejadian seperti itu harus memberi tahu sistem apakah kontrol yang diberikan menerima "kirim" atau tidak. Ketika tombol dilepaskan di atas kontrol penerima, satu atau dua peristiwa lagi dihasilkan, tergantung pada kesiapan penerima.

BatalkanSeret Membatalkan operasi drag-and-drop atau drag-and-dock saat ini.

Fungsi FindDragTarget (const Pos: TPoint; AllowDisabled: Boolean): TControl;

Fungsi mengembalikan objek dari kelas dasar Kontrol , di mana posisi layar berada dengan koordinat yang ditentukan oleh parameter Pos. Fungsi ini digunakan untuk menentukan penerima potensial dari operasi drag-and-drop atau drag-and-dock. Jika tidak ada kontrol jendela untuk posisi yang ditentukan, maka fungsi akan kembali nol ... Parameter AllowDisabled menentukan apakah objek yang dinonaktifkan dihitung.

IsDragObject (Pengirim: TObject) fungsi: Boolean;

Fungsi menentukan apakah objek yang ditentukan dalam parameter Pengirim adalah turunan dari kelas Objek TDrag . Fungsi ini dapat digunakan sebagai parameter Sumber dalam event handler OnDragOver dan OnDockOver untuk menentukan apakah objek yang diseret akan diterima. Juga fungsinya ApakahSeretObjekdapat digunakan sebagai parameter Sumber dalam event handler OnDragDrop dan OnDockDrop untuk menginterpretasikan objek yang diseret dengan benar.

DragMode, properti DragCursor, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, metode OnStartDrag, parameter Terima

Proses menyeret dan menjatuhkan informasi dari satu objek ke objek lain banyak digunakan di Widows. Anda dapat memindahkan file antar folder, memindahkan folder, dan banyak lagi.

Semua properti, metode, dan kejadian yang terkait dengan proses drag-and-drop didefinisikan di kelas TControl, yang merupakan induk dari semua komponen visual Delphi. Oleh karena itu, mereka umum untuk semua komponen.

Awal dari drag ditentukan oleh properti DragMode, yang dapat diatur pada waktu desain atau secara program sama dengan dmManual atau dmAutomatic. Nilai dmAutomatic (otomatis) menentukan apakah proses drag-and-drop dimulai secara otomatis ketika pengguna mengklik mouse di atas komponen. Namun, dalam kasus ini, peristiwa OnMouseDown yang terkait dengan pengguna yang mengklik tombol mouse tidak terjadi untuk komponen ini sama sekali.

Antarmuka untuk mentransfer dan menerima komponen muncul sejak lama. Hal ini memungkinkan dua kontrol untuk berinteraksi saat aplikasi sedang berjalan. Dalam hal ini, operasi yang diperlukan dapat dilakukan. Terlepas dari kesederhanaan implementasi dan usia pengembangan, banyak programmer (terutama pemula) menganggap mekanisme ini tidak jelas dan eksotis. Namun, menggunakan Drag-and-Drop bisa sangat berguna dan mudah diterapkan. Sekarang kita akan yakin akan hal ini.

Agar mekanisme bekerja, dua kontrol harus dikonfigurasi sesuai. Yang satu harus menjadi Sumber, yang lain menjadi Target. Dalam hal ini, sumber tidak bergerak ke mana pun, tetapi hanya terdaftar seperti itu dalam mekanisme.

Percayalah, cukup dengan hanya berkonversi Koordinat X, Y diteruskan dalam parameter acara OnDragOver dan OnDragDrop ke koordinat formulir.

Bekerja dengan properti Kiri dan Atas dari komponen yang kursornya melayang. Biarkan saya memberi Anda contoh sederhana. Tempatkan komponen Memo pada formulir dan atur properti Align ke alTop. Tempatkan panel pada bentuk, juga atur properti Align ke alTop dan atur properti Height ke nilai kecil, katakanlah 6 atau 7 piksel. Setel DragMode ke dmAutomatica dan DragCursor ke crVSplit. Tempatkan komponen Memo lain dan atur Align ke alClient. Pilih kedua komponen Memo secara bersamaan, buat panel dan buat pengendali acara umum untuk acara OnDragOver seperti yang ditunjukkan di bawah ini:

Baru-baru ini saya memiliki ide untuk mulai mengembangkan game untuk android. Untuk memulainya, saya memutuskan untuk menulis catur. Sepertinya saya teknologi Seret dan lepas sempurna untuk menerapkan mekanisme untuk memindahkan bentuk. Untuk yang belum tahu, saya perhatikan bahwa metode seret dan lepas adalah dalam kemampuan untuk menyeret beberapa objek grafis ke objek lain dan melakukan tindakan setelah melepaskannya. Contoh paling sederhana- menghapus pintasan dari desktop PC Anda dengan menyeretnya ke tempat sampah. Dengan "melempar" pintasan ke tempat sampah, kami memberi tahu sistem bahwa kami ingin memaksa kedua objek ini berinteraksi. Sistem menerima sinyal kami dan memutuskan tindakan apa yang harus diambil. Seret dan lepas telah menyebar luas karena kejelasan intuitifnya. Pendekatan ini didukung oleh pengalaman kami dengan objek dunia nyata dan bekerja dengan baik di lingkungan virtual. Sedangkan untuk catur, menggunakan drag and drop secara teknologi lebih mudah untuk menentukan sel di mana pengguna telah menyeret bidaknya, karena tidak perlu menghitung jumlah sel dengan koordinat titik jatuhnya. Pekerjaan ini akan diambil alih oleh mesin virtual.

Tujuan menggunakan teknologi Drag n Drop

Menggunakan teknologi drag and drop memungkinkan saya untuk memecahkan tiga masalah dengan sedikit darah:

1. Visualisasi kursus. Saat pengguna mengetuk sebuah bentuk dan mulai menggerakkannya di sekitar layar, bentuk tersebut akan diganti dengan gambar yang lebih kecil. Dengan demikian, pengguna memahami bahwa sosok tersebut ditangkap.
2. Saya telah membatasi area pergerakan bentuk dengan ukuran papan.
3. Jika pengguna melepaskan bentuk di tempat yang salah, itu harus kembali ke posisi semula.

Tugas diuraikan, mari kita mulai implementasinya.

Tukar ImageView saat disentuh

Semua bentuk saya adalah objek ImageView. Sayangnya, ternyata penerapan Drag & Drop di Android tidak memungkinkan "out of the box" untuk menggantikan gambar suatu objek saat disentuh. Namun demikian, tugas ini cukup dapat diselesaikan melalui API. Kita perlu melakukan sejumlah langkah sederhana:

1. Buat objek DragShadowBuilder.
2. Panggil metode startDrag.
3. Sembunyikan ImageView kami yang menampilkan bentuk dengan memanggil metode setVisibility dengan parameter View.INVISIBLE. Akibatnya, hanya objek DragShadowBuilder yang akan tetap berada di layar, yang akan memberi sinyal kepada pengguna untuk mengambil bentuk.

Langkah-langkah ini harus diterapkan di pengendali OnTouchListner dari ImageView. Untuk melakukan ini, kami akan mengganti metode onTouch:

@ Override public boolean onTouch (View view, MotionEvent motionEvent) (if (motionEvent. GetAction () == MotionEvent. ACTION_DOWN) (ClipData clipData = ClipData. NewPlainText ("", ""); View. DragShadowBuilder dsb = Tampilan baru. DragShadowBuilder (tampilan); view. startDrag (clipData, dsb, view, 0); view. setVisibility (View. INVISIBLE); return true;) else (return false;))

Semuanya sangat sederhana. Jadi, kami menemukan substitusi gambar, mari beralih ke tugas berikutnya.

Membatasi area drag untuk fungsi drag drop

Ada satu masalah dengan membatasi area drag. Intinya adalah jika Anda menjatuhkan bentuk di luar papan, peristiwa jatuhkan tidak akan terjadi, karena pengguna menjatuhkan objek dari awal dan objek tidak berinteraksi dengan apa pun. Akibatnya, sosok itu tidak akan kembali ke keadaan semula dan akan tetap tersembunyi selamanya. Saya menghabiskan banyak waktu membaca dokumentasi, tetapi saya masih belum menemukan cara untuk membatasi jangkauan objek yang diseret. Inspirasi datang tiba-tiba. Saya tidak perlu membatasi area sama sekali, saya perlu tahu apakah pengguna melepaskan bentuknya dengan benar atau tidak.

Menentukan rilis yang benar
Saya menemukan jawaban atas pertanyaan saya di bagian "menangani peristiwa akhir seret" di situs Pengembang Android. Berikut adalah beberapa poin penting:

1. Saat pengguna selesai menyeret, peristiwa ACTION_DRAG_ENDED diaktifkan di pengendali DragListeners.
2. Di DragListener, Anda bisa mendapatkan informasi lebih detail tentang operasi drag dengan memanggil metode DragEvent.getResult().
3. Jika DragListener mengembalikan true sebagai respons terhadap event ACTION_DROP, panggilan getResult juga akan mengembalikan true, jika tidak, false.

Jadi, saya perlu mencegat acara ACTION_DRAG_ENDED dan memanggil metode getResult. Jika mengembalikan false, maka pengguna telah menyeret bentuk dari papan dan saya perlu menempatkan ImageView dalam mode terlihat.

@ Override onDrag boolean publik (Lihat tampilan, DragEvent dragEvent) (int dragAction = dragEvent. GetAction (); Lihat dragView = (Lihat) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (berisiDragable = false;) lain 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; & berisiDragable) (tampilan checkForValidMove ((ChessBoardSquareLayoutView, dragView); dragView. SetVisibility (View. VISIBLE);) return true;) private boolean dropEventNotHandled (DragEvent dragEvent) (kembali! DragRult ); )

Sekarang pengguna dapat melepaskan sosok itu di mana saja, dan tidak ada hal buruk yang akan terjadi.

Menentukan Gerakan yang Diizinkan

Bagian terakhir artikel dikhususkan untuk memeriksa validitas gerakan yang coba dilakukan pengguna. Sebelum mulai membahas topik ini secara rinci, saya akan membuat komentar kecil yang menjelaskan struktur aplikasi saya. Kotak-kotak direpresentasikan sebagai TableLayout, dan setiap sel adalah turunan dari LinearLayout dan memiliki OnDragListener.

Selain itu, setiap OnDragListener mengacu pada objek mediator yang menangani interaksi objek game dan mengingat posisi sel saat ini.

Saat pengguna menyeret bidak di atas sangkar, tindakan berikut mungkin dilakukan:

1. Menggunakan acara ACTION_DRAG_ENTERED untuk menyetel variabel 'containsDraggable' ke true.
2. Menggunakan acara ACTION_DRAG_EXITED untuk menyetel variabel 'containsDraggable' ke false.
3. Menggunakan acara ACTION_DROP untuk menanyakan broker apakah diperbolehkan menempatkan angka di sel ini.

Di bawah ini adalah kode yang mengimplementasikan logika yang dijelaskan

@ Override onDrag boolean publik (Lihat tampilan, DragEvent dragEvent) (int dragAction = dragEvent. GetAction (); Lihat dragView = (Lihat) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (berisiDragable = false;) lain 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; & berisiDragable) (tampilan checkForValidMove ((ChessBoardSquareLayoutView, dragView); dragView. SetVisibility (View. VISIBLE);) mengembalikan true;)

Seperti yang Anda lihat, terlepas dari apakah langkah tersebut legal atau tidak, ImageView diatur ke status yang terlihat. Saya ingin pengguna melihat bentuk bergerak. Saya sebutkan sebelumnya bahwa sel adalah keturunan dari LayoutView. Hal ini dilakukan untuk memudahkan pemindahan ImageView dari sel ke sel. Di bawah ini adalah kode untuk metode checkForValidMove yang menunjukkan bagaimana ImageView bergerak.

private void checkForValidMove (tampilan ChessBoardSquareLayoutView, View dragView) (if (mediator. isValidMove (view)) (Pemilik ViewGroup = (ViewGroup) dragView. getParent (); pemilik. removeView (dragView); view. addView (dragView); view. setGravity (Gravity. CENTER); tampilan. ShowAsLanded (); mediator. HandleMove (tampilan);))

Saya harap artikel ini akan membantu Anda dalam mengembangkan proyek Anda sendiri.