Mencegah gambar agar tidak dapat diseret atau dipilih tanpa menggunakan JS


132

Adakah yang tahu cara membuat gambar tidak bisa diseret dan tidak dapat dipilih - di saat bersamaan - di Firefox, tanpa menggunakan Javascript? Tampaknya sepele, tapi ini masalahnya:

1) Dapat diseret dan disorot di Firefox:

<img src="...">

2) Jadi kami menambahkan ini, tetapi gambar masih dapat disorot sambil menyeret:

<img src="..." draggable="false">

3) Jadi kami menambahkan ini, untuk memperbaiki masalah penyorotan, tetapi kemudian secara berlawanan, gambar menjadi dapat diseret lagi. Aneh, saya tahu! Menggunakan FF 16.0.1

<img src="..." draggable="false" style="-moz-user-select: none;">

Jadi, apakah ada yang tahu mengapa menambahkan "-moz-user-select: none", entah bagaimana akan mengalahkan dan menonaktifkan "draggable = false"? Tentu saja, webkit berfungsi seperti yang diharapkan. Tidak ada yang ada di luar sana tentang Jalinan tentang ini ... Akan lebih bagus jika kita bisa menyinari hal ini bersama-sama.

Terima kasih!!

Sunting: Ini tentang menjaga agar elemen UI tidak terseret secara tidak sengaja dan meningkatkan kegunaan - bukan upaya timpang pada skema perlindungan salinan :-)


1
Saya harap Anda tidak berpikir ini akan mencegah orang menyimpan gambar Anda ke disk. Siapa pun yang bahkan memiliki sedikit pemahaman tentang bagaimana browser bekerja akan dapat menyelesaikan ini dengan mudah.
Jim Garrison

@ JimGarrison tentu saja tidak, maaf saya seharusnya lebih spesifik, saya mencoba untuk menjaga beberapa elemen UI saya agar tidak bergerak, dalam konteks yang benar itu merusak kegunaan.
tmkly3

Sangat berguna sebagai gantinya jika Anda memiliki elemen latar belakang yang akan diseret pada desktop (atau lebih buruk lagi seperti garis kode href ke beberapa file yang terbuka di belakang jendela browser saat sedang mengerjakannya!) Ketika elemen tersebut dekat dengan bilah gulir modern yang sangat kecil dan Anda jangan menekan bilah tepat setiap kali menguji gulungan.
Garavani

1
Ini telah menjadi masalah yang dikenal di Firefox untuk waktu yang sangat lama ternyata ( duplikat? )
Coderer

Jawaban:


210

Setel properti CSS berikut ke gambar:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

3
Terima kasih, saya sudah memilikinya, tetapi masalahnya mulai terlihat seperti bug di Firefox. Saya kira satu-satunya cara untuk mengatasi ini untuk saat ini adalah melalui Javascript.
tmkly3

Bekerja di semua browser.
Milad Abooali

Baiklah jadi bagaimana saya membuatnya tidak menunjukkan efek tetapi masih menjalankan event drag?
Ty_

6
Saya menemukan saya masih bisa menyeret pada Firefox 47 tetapi menambahkan ondragstart = "return false;" properti ke tag gambar memperbaikinya.
andrew pate

3
Saya masih bisa menyeret chrome
lonewarrior556

54

Saya lupa membagikan solusi saya, saya tidak dapat menemukan cara untuk melakukan ini tanpa menggunakan JS. Ada beberapa kasus sudut di mana @Jeffery A Wooden menyarankan CSS tidak akan mencakup.

Ini adalah apa yang saya terapkan pada semua wadah UI saya, tidak perlu diterapkan pada setiap elemen karena ia berhenti pada semua elemen anak.

CSS:

.unselectable {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

JS:

var makeUnselectable = function( $target ) {
    $target
        .addClass( 'unselectable' ) // All these attributes are inheritable
        .attr( 'unselectable', 'on' ) // For IE9 - This property is not inherited, needs to be placed onto everything
        .attr( 'draggable', 'false' ) // For moz and webkit, although Firefox 16 ignores this when -moz-user-select: none; is set, it's like these properties are mutually exclusive, seems to be a bug.
        .on( 'dragstart', function() { return false; } );  // Needed since Firefox 16 seems to ingore the 'draggable' attribute we just applied above when '-moz-user-select: none' is applied to the CSS 

    $target // Apply non-inheritable properties to the child elements
        .find( '*' )
        .attr( 'draggable', 'false' )
        .attr( 'unselectable', 'on' ); 
};

Ini jauh lebih rumit daripada yang seharusnya.


1
$ (el) .on ('dragstart', function (e) {e.preventDefault ();});
Pete B

3
Itu juga bisa ditulis <img src="..." draggable="false" style="-moz-user-select: none;" ondragstart="return false;">agar sesuai dengan kode OP.
Masadow

38

Anda dapat menggunakan pointer-eventsproperti di CSS Anda, dan mengaturnya sama dengan 'tidak ada'

img {
    pointer-events: none;
}

Diedit

ini akan memblokir (klik) acara. Jadi solusi yang lebih baik

<img draggable="false" (dragstart)="false;" class="unselectable">

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

1
Melakukannya dengan cara ini membuat ikon gambar berperilaku lebih seperti glyphicon, jadi saya paling suka metode ini.
Funkodebat

9
Ini juga membuat acara seperti (klik) tidak dapat digunakan .. hati-hati jika Anda menggunakan pendekatan ini.
Nicolas Bouvrette

Jawaban ini masih valid sementara jawaban yang diterima tidak pada versi perangkat lunak terbaru. Ini harus menjadi jawaban yang baru diterima. @ tmkly3
progyammer

ini akan menimbulkan masalah jika kita memiliki event klik untuk gambar. Ini akan memblokir acara klik
Pratap AK

12

Bergantung pada situasinya, seringkali membantu untuk menjadikan gambar sebagai gambar latar belakang divdengan CSS.

<div id='my-image'></div>

Kemudian di CSS:

#my-image {
    background-image: url('/img/foo.png');
    width: ???px;
    height: ???px;
}

Lihat JSFiddle ini untuk contoh langsung dengan tombol dan opsi ukuran yang berbeda.


9

Anda mungkin bisa menggunakan

<img src="..." style="pointer-events: none;">

Ini harus menjadi jawaban yang diterima, seret pengguna tidak didukung oleh firefox. Terima kasih untuk ini!
Merritt6616

Bagi saya juga, "pointer-events" adalah solusinya karena ini bekerja lintas-browser ("user-drag" tidak berpengaruh pada Firefox, setidaknya pada 11.2018)
David Dal Busco

2

Solusi umum terutama untuk browser Windows Edge (sebagai -ms-user-select: none; aturan CSS tidak berfungsi):

window.ondragstart = function() {return false}

Catatan: Ini dapat menghemat Anda harus menambahkan draggable="false"ke setiap imgtag ketika Anda masih membutuhkan acara klik (yaitu Anda tidak dapat menggunakan pointer-events: none), tetapi tidak ingin gambar ikon seret muncul.


Satu-satunya jawaban yang benar-benar bekerja untuk saya! Tidak tahu mengapa itu tidak dipilih lebih tinggi.
AldaronLau

1

Anda dapat mengatur gambar sebagai gambar latar belakang. Karena berada di a div, dan divundraggable, gambar akan undraggable:

<div style="background-image: url("image.jpg");">
</div>

1

Saya membuat elemen div yang memiliki ukuran yang sama dengan gambar dan diposisikan di atas gambar . Kemudian, peristiwa mouse tidak pergi ke elemen gambar.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.