Bagaimana untuk Melaksanakan Kursor CSS Cross-Browser untuk Seret dan Lepas?

Kursor CSS Merentas Penyemak Imbas untuk Seret dan Lepas

Untuk meningkatkan pengalaman pengguna dalam aplikasi web JavaScript di mana latar belakang mesti diambil untuk gerakkan keseluruhan skrin, adalah penting untuk menukar kursor untuk menunjukkan tindakan rampasan. Walaupun kursor CSS -moz-grab dan -moz-grabbing sesuai untuk Firefox, sokongan mereka merentas penyemak imbas lain adalah terhad.

Penyelesaian Penyemak Imbas Silang

Mujurlah, terdapat kursor yang setara untuk pelayar lain:

<code class="css">.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}</code>

Kod ini menggunakan kursor "move" sebagai sandaran jika kursor "grab" tidak disokong, diikuti oleh kursor khusus vendor untuk Firefox (-moz -grab) dan penyemak imbas WebKit (-webkit-grab).

Grab vs. Grabbing

Untuk memberikan maklum balas visual yang lebih dinamik semasa operasi seretan, anda boleh secara pilihan gunakan kursor "tangan tertutup":

<code class="css">.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}</code>

Kod ini menukar kursor kepada "merebut" apabila pengguna secara aktif merebut latar belakang, menunjukkan bahawa skrin sedang dialihkan.

Oleh melaksanakan kursor CSS ini, anda boleh mencipta pengalaman seret dan lepas yang konsisten dan intuitif merentas pelbagai penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Kursor CSS Cross-Browser untuk Seret dan Lepas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!