Baru-baru ini saya punya ide untuk mengembangkan game android. Pertama-tama, saya memutuskan untuk menulis catur. Menurut saya, teknologi Drag and Drop akan sempurna untuk mengimplementasikan mekanisme untuk memindahkan bentuk. Untuk yang belum tahu, saya perhatikan bahwa metodenya seret dan lepas drop adalah kemampuan untuk menyeret satu objek grafis ke yang lain dan melakukan tindakan setelah dirilis. Contoh paling sederhana- hapus pintasan dari desktop PC Anda dengan menyeretnya ke tempat sampah. Dengan "melempar" label ke tempat sampah, kami memberi tahu sistem bahwa kami ingin membuat kedua objek ini berinteraksi. Sistem menerima sinyal kami dan memutuskan tindakan apa yang harus diambil. Seret dan lepas telah tersebar luas karena kejelasan intuitifnya. Pendekatan ini didukung oleh pengalaman kami berinteraksi dengan objek dunia nyata dan berfungsi dengan baik di lingkungan virtual. Sedangkan untuk catur, dengan menggunakan seret dan lepas, secara teknologi lebih mudah untuk menentukan sel tempat pengguna menyeret bidak, karena tidak perlu menghitung nomor sel dari koordinat titik jatuhkan. Pekerjaan ini akan diambil alih oleh mesin virtual.

Tujuan penggunaan Tarik teknologi n Jatuhkan

Menggunakan teknologi seret dan lepas memungkinkan saya menyelesaikan tiga masalah dengan sedikit darah:

Visualisasi gerakan. Saat pengguna menyentuh bentuk dan mulai menggerakkannya di sekitar layar, bentuk tersebut akan digantikan oleh gambar yang lebih kecil. Dengan demikian, pengguna memahami bahwa gambar tersebut ditangkap.

Saya membatasi area pergerakan gambar ke dimensi papan.

Jika pengguna melepaskan bentuk di tempat yang salah, itu harus kembali ke posisi semula.

Tugas sudah ditentukan, mari kita mulai implementasinya.

Ganti ImageView saat disentuh

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

Buat objek DragShadowBuilder.

Panggil metode startDrag.

Sembunyikan ImageView kita, 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 bahwa bentuk telah ditangkap.

Tindakan ini harus diimplementasikan dalam handler OnTouchListner dari objek ImageView. Untuk melakukannya, 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= new View. DragShadowBuilder(view) ; view.startDrag(clipData, dsb, view, 0 ) ; view.setVisibility( Lihat. TAK TERLIHAT); kembalikan benar;) lain (kembalikan salah;))

Semuanya sangat sederhana. Jadi, dengan substitusi gambar yang sudah diketahui, mari beralih ke tugas berikutnya.

Membatasi area drag untuk fungsi drag drop

Membatasi area seret terkait dengan satu masalah. Faktanya adalah jika Anda melepaskan bentuk di luar papan, peristiwa jatuh tidak akan terjadi, karena pengguna menjatuhkan objek di tempat kosong, dan objek tidak memiliki interaksi apa pun. Akibatnya, sosok itu tidak akan kembali ke aslinya keadaan asli dan itu akan tetap tersembunyi selamanya. Saya telah menghabiskan banyak waktu membaca dokumentasi, tetapi belum menemukan cara untuk membatasi area seret objek. Wahyu datang secara tiba-tiba. Saya tidak perlu membatasi area sama sekali, saya perlu mengetahui apakah pengguna telah merilis gambar dengan benar atau tidak.

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

Saat pengguna selesai menyeret, peristiwa ACTION_DRAG_ENDED dipicu di penangan DragListeners.

Di DragListener Anda bisa mendapatkan lebih banyak Informasi rinci tentang operasi seret dengan memanggil metode DragEvent.getResult() .

Jika DragListener mengembalikan true sebagai respons terhadap peristiwa ACTION_DROP, panggilan getResult juga akan mengembalikan true, jika tidak maka akan mengembalikan false.

Jadi saya perlu menangkap acara ACTION_DRAG_ENDED dan memanggil metode getResult. Jika hasilnya salah, maka pengguna menyeret bentuk dari papan dan saya perlu membuat ImageView terlihat.

@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 ; ) else 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;& containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView ) ; dragView.setVisibility(View.VISIBLE) ; ) mengembalikan true ; ) dropEventNotHandled boolean pribadi(DragEvent dragEvent) ( return ! dragEvent.getResult() ; )

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

Penentuan gerakan yang diizinkan

Bagian terakhir dari artikel ini dikhususkan untuk memeriksa validitas langkah yang coba dilakukan pengguna. Sebelum membahas topik ini secara mendetail, saya akan membuat komentar kecil yang menjelaskan struktur aplikasi saya. Papan catur direpresentasikan sebagai TableLayout, dan setiap sel adalah turunan dari LinearLayout dan memiliki OnDragListener.

Selain itu, setiap OnDragListener merujuk ke objek "mediator", yang menangani interaksi objek game dan mengingat posisi sel saat ini.

Saat pengguna menyeret bentuk di atas sel, tindakan berikut mungkin dilakukan:

Menggunakan acara ACTION_DRAG_ENTERED untuk menyetel variabel 'containsDraggable' ke true.

Menggunakan event ACTION_DRAG_EXITED untuk mengatur variabel 'containsDraggable' menjadi false.

Menggunakan event ACTION_DROP untuk mengkueri middleware jika suatu bentuk diizinkan untuk ditempatkan di sel ini.

Di bawah ini adalah kode yang mengimplementasikan logika yang dijelaskan

@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 ; ) else 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;& containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView ) ; dragView.setVisibility(View.VISIBLE); ) mengembalikan true ; )

Seperti yang Anda lihat, terlepas dari apakah pemindahan itu valid atau tidak, ImageView diatur ke keadaan terlihat. Saya ingin pengguna melihat bentuk bergerak. Sebelumnya saya menyebutkan bahwa sel adalah anak dari LayoutView. Ini dilakukan untuk memudahkan memindahkan ImageView dari sel ke sel. Di bawah ini adalah kode untuk metode checkForValidMove, yang menunjukkan bagaimana ImageView dipindahkan.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator.isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView.getParent() ; owner.removeView(dragView) ; view.addView(dragView) ; view.setGravity(Gravity.CENTER) ; view.showAsLanded() ; mediator.handleMove (melihat); ))

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

Berbicara tentang antarmuka pengguna grafis, orang tidak bisa tidak menyebutkan teknologi Drag and Drop (secara harfiah: Tarik dan Lempar).

Teknologi ini didasarkan pada elemen seret dan lepas GUI dari sumber ke penerima. Antarmuka hanya dapat diakses dengan mouse (touchpad, trackball) atau layar sentuh.

Elemen yang dapat diseret diambil dan ditahan dengan mouse sambil diseret ke lokasi berbeda pada saat yang bersamaan. Saat mouse berada di posisi yang benar, tombol mouse dilepaskan, melepaskan objek.

Namun, antarmuka Drag'n Drop harus dibedakan dari kontrol antarmuka yang memiliki metode dalam metodenya yang bertanggung jawab untuk bergerak, diimplementasikan dengan cara yang sama. Misalnya, sebuah jendela (bentuk) memiliki kemampuan untuk bergerak di sekitar layar (dengan menyeret area judul). ScrollBox memiliki penggeser gulir. Namun dalam kedua contoh, menyeret adalah tindakan (peristiwa) internal (untuk komponen) dan tidak memengaruhi objek lain dalam sistem dengan cara apa pun.

Antarmuka seret dan lepas hanya berlaku untuk memindahkan objek dari wadah ke wadah, meskipun wadahnya heterogen. Misalnya, menyeret file dari folder ke email.

Seret dan Jatuhkan antarmuka dalam teknologi web

Penggunaan antarmuka seret dan lepas dalam teknologi web telah menjadi terobosan dalam . Ada editor Drag and Drop offline (misalnya, DreamWeaver) dan online (misalnya, pembuat situs web modern apa pun.

Untuk pustaka VCL, Borland telah mengimplementasikan antarmuka Drag&Drop versinya sendiri (diterjemahkan sebagai "seret"). Antarmuka ini bersifat internal - Anda dapat mengirim dan menerima 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 melepaskan.

Mengklik tombol kiri arahkan mouse ke kontrol, kita dapat "menyeret" ke elemen lainnya. 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. Penerima peristiwa adalah elemen tempat tombol saat ini kursor berada. Penangan untuk kejadian seperti itu harus memberi tahu sistem apakah kontrol yang diberikan menerima "pengiriman" atau tidak. Saat tombol dilepas pada kontrol penerima, satu atau dua peristiwa lagi diaktifkan, tergantung pada kesiapan penerima.

CancelDrag 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 TControl , yang mengacu pada posisi layar 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 mengembalikan nil . Parameter AllowDisabled menentukan apakah objek yang dinonaktifkan akan diperhitungkan.

Fungsi IsDragObject(Pengirim: TObject ): Boolean ;

Fungsi menentukan apakah objek yang ditentukan dalam parameter Sender adalah turunan dari kelas TDragObject. Fungsi ini dapat digunakan sebagai parameter Sumber di penangan kejadian OnDragOver dan OnDockOver untuk menentukan apakah objek yang diseret akan diterima. Selain itu, fungsi IsDragObject dapat digunakan sebagai parameter Sumber dalam penangan kejadian OnDragDrop dan OnDockDrop untuk menginterpretasikan objek yang diseret dengan benar.

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

Proses menyeret informasi dari satu objek ke objek lain dengan mouse banyak digunakan di Janda... Anda dapat memindahkan file antar folder, memindahkan folder itu sendiri, dan banyak lagi.

Semua properti, metode, dan event yang terkait dengan proses seret dan lepas didefinisikan di kelas TControl, yang merupakan induk dari semua komponen visual Delphi. Oleh karena itu, mereka umum untuk semua komponen.

Awal drag ditentukan oleh properti DragMode, yang dapat diatur pada waktu desain atau secara terprogram sama dengan dmManual atau dmAutomatic. Nilai dmAutomatic (otomatis) menentukan dimulainya proses penarikan otomatis saat pengguna mengklik tombol mouse di atas komponen. Namun, dalam kasus ini, kejadian OnMouseDown yang terkait dengan pengguna yang menekan tombol tetikus tidak terjadi sama sekali untuk komponen ini.

Antarmuka untuk mentransfer dan menerima komponen sudah lama muncul. Ini menyediakan interaksi antara dua kontrol selama eksekusi aplikasi. Dalam hal ini, setiap 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 diimplementasikan. Sekarang kami akan memverifikasi ini.

Agar mekanisme berfungsi, dua kontrol harus dikonfigurasi dengan tepat. Yang satu harus menjadi sumber (Sumber), yang kedua - penerima (Target). Dalam hal ini, sumbernya tidak berpindah kemana-mana, tetapi hanya terdaftar seperti itu di dalam mekanisme.

Percayalah, itu cukup mudah untuk diubah Koordinat X,Y, meneruskan parameter peristiwa OnDragOver dan OnDragDrop, ke dalam koordinat formulir.

Bekerja dengan properti Left dan Top dari komponen yang kursor arahkan. Saya akan memberikan contoh sederhana. Tempatkan komponen Memo pada formulir dan atur properti Align ke alTop. Tempatkan panel pada formulir, atur juga properti Align ke alTop dan atur properti Height ke nilai kecil, misalnya 6 atau 7 piksel. Atur DragMode ke dmAutomatica dan DragCursor ke crVSplit. Tempatkan komponen Memo lainnya dan atur Align ke alClient. Pilih kedua Memo pada saat yang sama, panel, dan buat event handler OnDragOver yang umum seperti yang ditunjukkan di bawah ini:

Antarmuka Seret dan Lepas HTML memungkinkan aplikasi untuk menggunakan fitur seret dan lepas di browser. Pengguna dapat memilih dapat diseret elemen dengan mouse, seret elemen tersebut ke a dapat dijatuhkan elemen, dan jatuhkan dengan melepaskan tombol mouse. Representasi transparan dari dapat diseret elemen mengikuti pointer selama operasi drag.

Untuk situs web, ekstensi, dan aplikasi XUL, Anda dapat menyesuaikan elemen mana yang dapat dibuat dapat diseret, jenis umpan balik tersebut dapat diseret elemen menghasilkan, dan dapat dijatuhkan elemen.

Ikhtisar HTML Drag and Drop ini mencakup deskripsi antarmuka, langkah dasar untuk menambahkan dukungan drag-and-drop ke aplikasi, dan ringkasan interoperabilitas antarmuka.

Tarik Acara Event On Event Handler Aktif saat…

menyeret	ondrag	…A item yang diseret(elemen atau pemilihan teks) diseret.
dragend	ondragend	… operasi seret berakhir (seperti melepaskan tombol mouse atau menekan tombol Esc; lihat Menyelesaikan Drag.)
dragenter	ondragenter	… item yang diseret memasuki target drop yang valid. (Melihat Menentukan Target Jatuhkan.)
dragexit	ondragexit	…sebuah elemen tidak lagi menjadi target pemilihan langsung dari operasi seret.
dragleave	ondragleave	… item yang diseret meninggalkan target jatuh yang valid.
dragover	ondragover	… item yang diseret diseret ke target jatuh yang valid, setiap beberapa ratus milidetik.
dragstart	ondragstart	…pengguna mulai menyeret item. (Melihat Memulai Operasi Seret.)
menjatuhkan	menjatuhkan	... item dijatuhkan pada target penurunan yang valid. (Melihat Melakukan Drop.)

Catatan: Baik peristiwa dragstart maupun dragend tidak dipicu saat menyeret file ke browser dari OS.

Antarmuka Dasar-dasar

Bagian ini adalah ringkasan dari langkah-langkah dasar untuk menambahkan fungsionalitas seret dan lepas ke aplikasi.

mengidentifikasi apa yang dapat diseret

Membuat elemen dapat diseret membutuhkan penambahan dapat diseret atribut dan ondragstart event handler global, seperti yang ditunjukkan pada contoh kode berikut:

function dragstart_handler(ev) ( // Tambahkan id elemen target ke objek transfer data ev.dataTransfer.setData("text/plain", ev.target.id); ) window.addEventListener("DOMContentLoaded", () => ( // Dapatkan elemen dengan id const element = document.getElementById("p1"); // Tambahkan elemen pendengar acara ondragstart.addEventListener("dragstart", dragstart_ penangan); ));

Elemen ini dapat diseret.

Untuk informasi lebih lanjut, lihat:

menangani jatuhnya memengaruhi

Penangan untuk menjatuhkan acara gratis untuk memproses data seret dengan cara khusus aplikasi.

Biasanya, aplikasi menggunakan getData() metode untuk mengambil item seret dan kemudian memprosesnya sesuai. Selain itu, semantik aplikasi mungkin berbeda tergantung pada nilai