Bagaimana untuk melumpuhkan penyeretan dalam css

CSS melarang menyeret

CSS ialah salah satu alatan penting untuk mereka bentuk reka letak halaman web Ia mempunyai banyak sifat yang boleh melengkapkan idea reka bentuk anda dengan sempurna. Ini berguna dalam beberapa kes apabila elemen dalam halaman web boleh diseret, tetapi kadangkala ia bukan yang kita mahu. Jika anda sedang membangunkan tapak web dan mahu elemen tertentu tidak boleh diseret, anda telah datang ke tempat yang betul. Dalam artikel ini, kita akan belajar cara melumpuhkan menyeret elemen tertentu menggunakan CSS.

Larang menyeret imej

Mula-mula, mari belajar cara melumpuhkan menyeret imej. Ini biasanya digunakan apabila kita perlu membetulkan saiz atau kedudukan imej untuk mengelakkan ralat. Kod dalam CSS untuk melumpuhkan imej boleh seret adalah sangat mudah Anda hanya perlu menetapkan atribut unsur boleh seret kepada palsu:

img {
    draggable: false;
}

Ini akan menghalang pengguna daripada mengalih atau menyalin imej dengan menyeret.

Lumpuhkan teks seret

Melumpuhkan teks seret juga merupakan permintaan biasa. Dalam sesetengah kes, kami mungkin mahu menghalang pengguna daripada memilih teks tertentu atau menyalinnya ke papan keratan. Untuk menjadikan sifat teks elemen tidak boleh diseret, kita boleh menggunakan ciri CSS user-select dan menetapkan nilainya kepada tiada:

span {
    user-select: none;
}

Ini akan menghalang pengguna daripada memilih dan menyalin teks yang ditentukan. Walau bagaimanapun, ambil perhatian bahawa ia tidak menghalang pengguna daripada menyalin menggunakan pintasan papan kekunci (contohnya, ctrl+c atau command+c). Jika anda perlu menghalang penyalinan, anda perlu menggunakan teknik lain.

Lumpuhkan penyeretan elemen

Kadangkala, kita mungkin mahu menghalang elemen tertentu daripada diseret pada halaman. Ini boleh dicapai dengan menetapkan sifat boleh seret elemen kepada palsu dalam CSS:

div {
    draggable: false;
}

Dengan cara ini pengguna tidak akan dapat mengalihkan elemen ke lokasi baharu menggunakan penyeretan.

Pada masa yang sama, jika anda ingin melumpuhkan mana-mana elemen dalam keseluruhan halaman daripada diseret, anda boleh menetapkan atribut boleh seret elemen badan kepada palsu:

body {
    draggable: false;
}

Ini akan lumpuhkan sebarang elemen dalam keseluruhan halaman Elemen itu diseret.

Lumpuhkan penyeretan pautan

Dalam sesetengah kes, kami mungkin perlu melumpuhkan pengguna daripada menyeret pautan tertentu ke dalam tab baharu atau tetingkap baharu. Melumpuhkan penyeretan pautan boleh dilakukan dengan kod berikut dalam CSS:

a {
    draggable: false;
}

Dengan cara ini apabila pengguna cuba menyeret pautan, ia tidak akan dapat beralih ke tab atau tetingkap baharu.

Ringkasan

Dalam artikel ini, kami mempelajari cara melumpuhkan penyeretan elemen tertentu menggunakan CSS. Kami mempelajari cara untuk melumpuhkan penyeretan imej, melumpuhkan penyeretan teks, melumpuhkan penyeretan keseluruhan elemen dan melumpuhkan penyeretan pautan. Sama ada anda berada di sini untuk memanfaatkan kuasa CSS atau melindungi tapak anda daripada perubahan yang tidak disengajakan oleh pengguna, teknik ini akan memberikan anda persediaan yang selesa.

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan penyeretan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!