Seret dan jatuhkan yang boleh diakses dengan pelbagai item

Artikel ini menunjukkan peningkatan fungsi drag-and-drop HTML5 untuk pengendalian elemen dan kebolehcapaian papan kekunci, yang memberi manfaat kepada pengguna pembaca dan skrin. Dengan mengandaikan kebiasaan asas dengan API drag-and-drop (rujuk artikel pengenalan untuk pemula), kami akan memberi tumpuan kepada memperluaskan keupayaannya.

Walaupun manipulasi data teras untuk pelbagai elemen adalah mudah (menggunakan array berasingan dan bukannya

), kerumitan antara muka pengguna meningkat dengan ketara. Kami akan menangani mekanisme pra-pemilihan dan sokongan papan kekunci, kerana drag-and-drop asli tidak mempunyai yang terakhir. Nota: Peristiwa sentuh dan polyfills penyemak imbas berada di luar skop artikel ini. Penyelesaian yang dibentangkan berfungsi dalam satu halaman, bukan di seluruh Windows. dataTransfer

Penambahbaikan utama:

Enhanced HTML5 drag-and-drop untuk pemilihan pelbagai item dan navigasi papan kekunci, meningkatkan kebolehcapaian.
array menjejaki pelbagai elemen semasa menyeret, memudahkan integrasi ke dalam persekitaran dinamik (seperti sistem CMS) di mana ID tidak statik.
kebolehcapaian papan kekunci dilaksanakan menggunakan atribut ARIA (
• , aria-grabbed) dan ketukan kekunci standard (ruang untuk pemilihan, kawalan m/perintah m untuk drop). aria-dropeffect
Antara muka yang dipermudahkan mengelakkan pemilihan bersebelahan, merawat semua kekunci pengubah suai untuk pemilihan yang tidak bersesuaian.
Kemas kini Atribut ARIA Dinamik Pastikan interaksi silang modal (tetikus/keyboard) lancar.
keserasian silang penyemak imbas yang teguh menangani isu-isu seperti peristiwa drop yang tidak menembak pada Mac/WebKit dengan kekunci arahan ditekan (menggunakan
• untuk penurunan drop). dragend

Seret dan drop Asas (contoh mudah):

Contoh berfungsi menunjukkan drag-and-drop asas untuk satu elemen menggunakan interaksi tetikus. Kod ini mengekalkan rujukan item dan bukannya bergantung pada

untuk ID elemen, memudahkan proses dan meningkatkan kebolehsuaian kepada aplikasi sisi pelayan. dataTransfer dan effectAllowed ditinggalkan kerana sokongan penyemak imbas yang tidak konsisten. Atribut draggable digunakan secara dinamik melalui JavaScript, memisahkan kebimbangan dan membolehkan pengecualian pelaksanaan yang rosak (seperti versi opera yang lebih lama). HTML menggunakan atribut dropEffect untuk pengenalpastian. data-draggable

Pelaksanaan seret dan drop yang boleh diakses:

Kebolehcapaian adalah yang paling utama. Kami akan mematuhi garis panduan amalan pengarang Aria untuk drag-and-drop:

1. Elemen Draggable Gunakan aria-grabbed="false" dan papan kekunci-navigable.
2. Spacebar memilih elemen; aria-grabbed menjadi "benar" semasa pemilihan.
3. Kawalan M/Command M memuktamadkan pilihan (pintasan ke sasaran drop pertama).
4. Elemen Sasaran Gunakan aria-dropeffect untuk menunjukkan tindakan yang dibenarkan.
5. kawalan m/perintah m atau masukkan melakukan tindakan drop pada elemen sasaran.
6. Escape membatalkan operasi.
7. Reset Pembersihan Post-Action aria-dropeffect dan aria-grabbed.

kami akan meningkatkan cadangan ini: Kekunci kekunci akhir pilihan adalah pilihan, dan mengawal M/Command M ditambah dengan Enter untuk menjatuhkan. Untuk kesederhanaan, semua kekunci pengubah (peralihan, kawalan, perintah) membolehkan pemilihan yang tidak bersesuaian.

pemilihan berganda (tetikus dan papan kekunci):

Kod menambah aria-grabbed dan tabindex atribut kepada elemen draggable. Pemilihan Tetikus Menggunakan mousedown (Single/Reset) dan (Deselect/Multiple). Pemilihan Papan Kekunci menggunakan mouseup dengan bar ruang untuk pemilihan, pengendalian pengubah untuk pelbagai pilihan. A Property Memastikan pilihan terhad kepada satu bekas. Fungsi keydown, selections.owner, dan addSelection menguruskan keadaan pemilihan. removeSelection clearSelections

menyeret pemilihan (tetikus dan papan kekunci):

digunakan untuk menunjukkan sasaran drop yang sah. Interaksi papan kekunci menambah

apabila pemilihan. Untuk interaksi tetikus, aria-dropeffect dan aria-dropeffect="move" peristiwa menguruskan keadaan hover, menggunakan pembolehubah dragenter dan fungsi dragleave untuk mengendalikan peristiwa menggelegak. related dikeluarkan dari item dalam bekas sasaran untuk meningkatkan navigasi papan kekunci. getContainer tabindex

menjatuhkan pemilihan (tetikus dan papan kekunci):

acara

(tetikus) mengendalikan penurunan dan tetapkan semula. Acara

tidak disebabkan oleh ketidakkonsistenan penyemak imbas. Interaksi papan kekunci menggunakan acara dragend pada bekas sasaran untuk mengendalikan titisan, menguruskan fokus untuk mengelakkan masalah menetapkan semula. drop keydown

Penambahbaikan lebih lanjut:

Penambahbaikan masa depan boleh merangkumi sokongan acara sentuhan/penunjuk, polyfills pelayar, pemilihan pemilihan, tindakan salinan/langkah yang disesuaikan, pemilihan bersebelahan, hantu seretan tersuai, dan isyarat visual semasa seret. Kod ini boleh didapati di GitHub (pautan yang disediakan dalam teks asal).

FAQs:

Seksyen Soalan Lazim memberikan jawapan yang jelas dan ringkas kepada soalan-soalan biasa mengenai pelaksanaan seret dan drop yang boleh diakses, meliputi pelbagai elemen, kawasan yang boleh ditanam, kawalan pesanan, pengendalian ralat, dan ujian.

Atas ialah kandungan terperinci Seret dan jatuhkan yang boleh diakses dengan pelbagai item. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!