CSS / JS untuk mencegah penarikan gambar hantu?

Apakah ada cara untuk mencegah pengguna melihat hantu gambar yang mereka coba seret (tidak khawatir tentang keamanan gambar, tetapi pengalaman).

Saya sudah mencoba ini yang memperbaiki masalah dengan pemilihan biru pada teks dan gambar tetapi tidak pada gambar hantu:

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

(Saya juga mencoba bersarang gambar di dalam div dengan aturan yang sama diterapkan pada div). Terima kasih

Anda dapat mengatur draggableatribut ke falsedalam markup atau kode JavaScript.

// As a jQuery method: $('#myImage').attr('draggable', false);
document.getElementById('myImage').setAttribute('draggable', false);

<img id="myImage" src="http://placehold.it/150x150">

Saya pikir Anda dapat mengubah

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

menjadi a

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

Cobalah:

img {
  pointer-events: none;
}

dan coba hindari

* {
  pointer-events: none;
}

Anda dapat menggunakan properti CSS untuk menonaktifkan gambar di browser webkit.

img{-webkit-user-drag: none;}

Ini akan menonaktifkan seret untuk gambar di semua browser , sambil mempertahankan acara lain seperti klik dan arahkan. Bekerja selama ada HTML5, JS, atau CSS.

<img draggable="false" onmousedown="return false" style="user-drag: none" />

Jika Anda yakin pengguna akan memiliki JS, Anda hanya perlu menggunakan atribut JS, dll. Untuk lebih fleksibel, lihat ondragstart, onselectstart, dan beberapa WebKit tap / touch CSS.

Tangani dragstartacara dan return false.

Anda dapat menetapkan gambar hantu alternatif jika Anda benar-benar perlu menggunakan acara seret dan tidak dapat mengatur draggable = false. Jadi cukup berikan png kosong seperti ini:

    $('#img').bind({
        dragstart: function(e) {
            var dragIcon = document.createElement('img');
            dragIcon.src = 'blank.png';
            dragIcon.width = 100;
            e.dataTransfer.setDragImage(dragIcon, -10, -10);
        }
    });

Tempatkan gambar sebagai latar belakang div kosong, atau di bawah elemen transparan. Ketika pengguna mengklik pada gambar untuk menarik, mereka mengklik div.

Lihat http://www.flickr.com/photos/thefella/5878724253/?f=hp

<div id="photo-drag-proxy"></div>

Untuk Firefox Anda harus sedikit lebih dalam dengan ini:

var imgs = document.getElementsByTagName('img');

    // loop through fetched images
    for (i = 0; i < imgs.length; i++) {
        // and define onmousedown event handler
        imgs[i].onmousedown = disableDragging;
    }

function disableDragging(e) {
        e.preventDefault();
    }

Nikmati.

Saya menemukan bahwa untuk IE, Anda harus menambahkan atribut draggable = "false" ke gambar dan jangkar untuk mencegah menyeret. opsi CSS berfungsi untuk semua browser lain. Saya melakukan ini di jQuery:

$("a").attr('draggable', false); 
$("img").attr('draggable', false);

Ada solusi yang jauh lebih mudah di sini daripada menambahkan pendengar acara kosong. Cukup atur pointer-events: noneke gambar Anda. Jika Anda masih membutuhkannya untuk diklik, tambahkan wadah di sekitarnya yang memicu acara.

<img src="myimage.jpg" ondragstart="return false;" />

Diuji pada Firefox: menghapus dan mengembalikan gambar berhasil! Dan itu transparan di eksekusi juga. Misalnya,

$('.imageContainerClass').mousedown(function() {
    var id = $(this).attr('id');
    $('#'+id).remove();
    $('#'+id).append('Image tag code');
});

EDIT : Ini hanya berfungsi pada IE dan Firefox, anehnya. Saya juga menambahkan draggable = falsepada setiap gambar. Masih hantu dengan Chrome dan Safari.

EDIT 2 : Solusi gambar latar belakang adalah yang terbaik. Satu-satunya kehalusan adalah bahwa background-sizeproperti harus didefinisikan ulang setiap kali gambar latar belakang diubah! Atau begitulah, sepertinya dari sisi saya. Lebih baik lagi, saya punya masalah dengan imgtag normal di bawah IE, di mana IE gagal untuk mengubah ukuran gambar. Sekarang, gambar memiliki dimensi yang benar. Sederhana:

$(id).css( 'background-image', url('blah.png') );
$(id).css( 'background-size', '40px');

Juga, mungkin pertimbangkan itu:

background-Repeat:no-repeat;
background-Position: center center;

Anda dapat mengatur gambar yang ditampilkan saat suatu item diseret. Diuji dengan Chrome.

setDragImage

menggunakan

onclick = myFunction();
myFunction(e) {
    e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}

Atau, seperti yang sudah disebutkan dalam jawaban, Anda dapat mengatur draggable="false"pada elemen HTML, jika tidak dapat menyeret elemen sama sekali tidak ada masalah.

Be-all-end-all, tanpa memilih atau menyeret, dengan semua awalan peramban:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;

Anda juga dapat mengatur draggableatribut false. Anda dapat melakukannya dengan HTML sebaris:, draggable="false"dengan Javascript:, elm.draggable = falseatau dengan jQuery:elm.attr('draggable', false) .

Anda juga dapat menangani onmousedownfungsinya return false. Anda dapat melakukannya dengan HTML sebaris:, onmousedown="return false"dengan Javascript:, elm.onmousedown=()=>return false;atau dengan jQuery:elm.mousedown(()=>return false)

Ini berfungsi untuk saya, saya menggunakan beberapa skrip lightbox

.nodragglement {
    transform: translate(0px, 0px)!important;
}