Nonaktifkan menyeret gambar dari halaman HTML

194

Saya harus meletakkan gambar di halaman saya. Saya ingin menonaktifkan menyeret gambar itu. Saya mencoba banyak hal tetapi tidak membantu. Bisakah seseorang membantu saya ?

Saya tidak ingin menyimpan gambar itu sebagai gambar latar karena saya mengubah ukuran gambar.

javascript jquery html css image Pengguna 1034
sumber

15

@ AgentConundrum - Tidak ada masalah bagi saya jika pengguna menyimpan dan melakukan apapun yang dia inginkan. Satu-satunya persyaratan saya adalah untuk tidak menyeret gambar itu.

Pengguna 1034

261

Anda bisa menyukai ini ...

document.getElementById('my-image').ondragstart = function() { return false; };

Melihatnya berfungsi (atau tidak bekerja, lebih tepatnya)

Sepertinya Anda menggunakan jQuery.

$('img').on('dragstart', function(event) { event.preventDefault(); });

alex
sumber

9

@alex - Tujuan tidak menyeret gambar tidak mencuri gambar. Tujuannya sangat berbeda. Saya membuat gambar itu sebagai sortable dan droppable. Jadi butuh waktu lama untuk menjelaskannya.

Pengguna 1034

2

@alex - Apakah ondragstart independen terhadap browser?

Pengguna 1034

1

@AdamMerrifield Coba $(document)alih-alih$(window)

rybo111

2

Saya baru saja bekerja Anda dapat menyederhanakan jQuery ke:$('img').on('dragstart', false);

rybo111

2

@alex Under handler:The value false is also allowed as a shorthand for a function that simply does return false.

Adam Merrifield

174

Hanya solusi CSS: gunakan pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

mikhuang
sumber

3

Tapi ini mengarah pada efek seleksi aneh pada FF atleast. Lebih baik lagi kembali salah;

Bhumi Singhal

itu tidak digunakan ketika gambar sebagai tautan.

Nilesh patel

3

Sepertinya ini tidak akan berfungsi di IE (versi apa pun) lihat: caniuse.com/pointer-events

Justin Tanner

8

Juga CSS hanya solusi: menempatkan elemen atas yang img.

alex

6

-1! Ini harus digunakan untuk mencegah SEMUA peristiwa ponter (termasuk menyeret, seperti ketika Anda ingin mengunggah gambar). Gunakan solusi javascript bukan!

Denys Vitali

129

tambahkan saja draggable = "false" ke tag gambar Anda:

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

Namun IE8 dan di bawah tidak mendukung.

dmo
sumber

Saya menggunakan Magento jadi div saya seperti: <div class = "product-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </div> Bagaimana cara membatasi klik kanan dan tidak ada draggable div gambar saya. @dmo

Permata

41

window.ondragstart = function() { return false; }

Ben
sumber

4

+1 Tidak mengerti downvotes. Ini bukan solusi akhir, sementara itu mencegah menyeret semua, tidak hanya gambar khusus. Tapi itu menunjukkan arah yang benar (dan saya pikir itu adalah jawaban pertama yang melakukannya)

Dr.Molle

@DrMolle Ini mungkin sebagai tanggapan atas (sejak dihapus) komentar yang ditinggalkan oleh Steve pada jawaban saya .

alex

2

Ingatlah bahwa kadang-kadang orang akan menyeret tautan ke bilah bookmark mereka - solusi ini akan menghilangkan kemampuan ini.

jClark

33

solusi lintas browser paling sederhana adalah

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

masalah dengan

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

adalah bahwa itu tidak berfungsi di firefox

imal hasaranga perera
sumber

25

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

Saya menggunakannya di situs web saya di http://www.namdevmatrimony.in/ Ini berfungsi seperti sihir !!! :)

Namdev Matrimony
sumber

6

Ini dapat digunakan di firefox

Dean Christian Armada

24

Saya mencoba sendiri dan ternyata ini berhasil.

$("img").mousedown(function(){
    return false;
});

Saya yakin ini menonaktifkan seret dari semua gambar. Tidak yakin itu memengaruhi sesuatu yang lain.

Pengguna 1034
sumber

3

Ah! Anda seharusnya menyebutkan bahwa Anda menggunakan jQuery / bisa menggunakan jQuery. +1 untuk menggunakan jQuery.

Alex

@alex - Saya minta maaf. Saya mencoba sendiri. Dan saya tidak yakin itu mempengaruhi sesuatu yang lain.

Pengguna 1034

Anda baik-baik saja! Tidak, sejauh yang saya tahu, melakukan apa yang Anda miliki di sini tidak boleh memiliki efek negatif pada hal lain.

Alex

2

Bagaimana jika gambar dibungkus dengan <a>tag? Lalu jika pengguna mengklik gambar, tautan tidak akan diklik.

SeinopSys

Terima kasih. Btw, ini juga berfungsi di GWT dengan `event.preventDefault ();`.

Johanna

14

Lihat jawaban ini ; di Chrome dan Safari Anda dapat menggunakan gaya berikut untuk menonaktifkan penyeretan default:

-webkit-user-drag: auto | element | none;

Kamu bisa mencoba pengguna untuk Firefox dan IE (10+):

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

mhu
sumber

11

Anda dapat menambahkan berikut ini ke setiap gambar yang tidak ingin Anda tarik, (di dalam imgtag):

onmousedown="return false;"

misalnya

img src="Koala.jpg" onmousedown="return false;"

BOBO
sumber

10

Kode ini melakukan apa yang Anda inginkan. Ini mencegah gambar menyeret sambil memungkinkan tindakan lain yang bergantung pada acara.

$("img").mousedown(function(e){
    e.preventDefault()
});

Robert
sumber

9

Langsung gunakan ini: ondragstart="return false;"di tag gambar Anda.

<img src="http://image-example.png" ondragstart="return false;"/>

Jika Anda memiliki banyak gambar, bungkus dengan <div>tag:

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

Bekerja di semua browser utama.

Jan
sumber

8

Karena gambar saya dibuat menggunakan ajax, dan karenanya tidak tersedia di windows.load.

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

Dengan cara ini saya dapat mengontrol bagian mana yang memblokir perilaku, hanya menggunakan satu peristiwa yang mengikat dan berfungsi untuk gambar ajax yang dibuat di masa depan tanpa harus melakukan apa pun.

Dengan jQuery new onbinding:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (terima kasih @ialphan)

guzart
sumber

1

Menggunakan .on akan seperti ini: $ (dokumen) .on ('dragstart', 'img', fungsi (e) {e.preventDefault ();});

ialphan

Ini solusi yang tepat. Satu peristiwa mengikat untuk imgelemen tak terbatas , sekarang atau masa depan. Paling tidak intensif, paling kuat.

Bearfriend

5

<img draggable="false" src="images/testimg1.jpg" alt=""/>

Mustafa
sumber

4

Solusi hebat, punya satu masalah kecil dengan konflik, Jika ada orang lain yang memiliki konflik dari perpustakaan js lainnya cukup memungkinkan tidak ada konflik seperti itu.

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

Semoga ini bisa membantu seseorang.

Paul
sumber

3

Yah saya tidak tahu apakah jawaban di sini telah membantu semua orang atau tidak, tapi inilah trik CSS inline sederhana yang pasti akan membantu Anda untuk menonaktifkan menyeret dan memilih teks pada halaman HTML.

Pada <body>tag Anda, tambahkan ondragstart="return false". Ini akan menonaktifkan penarikan gambar. Tetapi jika Anda juga ingin menonaktifkan pemilihan teks maka tambahkan onselectstart="return false".

Kode akan terlihat seperti ini: <body ondragstart="return false" onselectstart="return false">

Abhisek Das
sumber

3

Anda dapat mempertimbangkan solusi saya yang terbaik. Sebagian besar jawaban tidak kompatibel dengan browser lama seperti IE8 karena e.preventDefault () tidak akan didukung serta acara ondragstart . Untuk melakukannya lintas peramban yang kompatibel Anda harus memblokir mousemove acara untuk gambar ini. Lihat contoh di bawah ini:

jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

tanpa jQuery

var my_image = document.getElementById("my_image");
my_image.setAttribute("draggable", false);

if (my_image.addEventListener) {
   my_image.addEventListener("mousemove", function(e) { return false });
} else if (my_image.attachEvent) {
   my_image.attachEvent("onmousemove", function(e) { return false });
}

diuji dan bekerja bahkan untuk IE8

CodeGems
sumber

3

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;

Omid Farvid
sumber

1

Tampaknya tidak berfungsi di Firefox (menggunakan Mac Firefox 69)

Ben Wheeler

2

Yah, ini mungkin, dan jawaban lain yang diposting benar-benar valid, tetapi Anda bisa mengambil pendekatan brute force dan mencegah perilaku default mousedown pada gambar. Yang mana, adalah mulai menyeret gambar.

Sesuatu seperti ini:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};

Alex
sumber

2

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

Berfungsi dalam Plunker ini http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

dtothefp
sumber

2

jQuery:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

Anda dapat mengganti pemilih tubuh dengan wadah lain yang tidak ingin diseret dan dijatuhkan oleh anak-anak.

Lis
sumber

1

Anda dapat menggunakan kode sebaris untuk ini

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

Luaskan cuplikan

Dan opsi kedua adalah menggunakan css eksternal atau on-page

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

<img src="http://www.ourkanpur.com/images/logo.png">

Luaskan cuplikan

Keduanya Bekerja dengan Benar Saya menggunakan css eksternal di situs ini (Klik Di Sini)

Abhishek kamal
sumber

Tak satu pun dari ini tampaknya berfungsi pada Firefox (menggunakan Mac Firefox 69)

Ben Wheeler

1

Jawabannya sederhana:

<body oncontextmenu="return false"/>- Nonaktifkan klik kanan <body ondragstart="return false"/>- Nonaktifkan dragging mouse <body ondrop="return false"/>- Nonaktifkan drop mouse

Mendapatkan
sumber

-1

Saya melakukan properti css yang ditampilkan di sini dan memonitor ondragstart dengan javascript berikut:

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

Alokus
sumber

-2

Mencuri jawaban saya sendiri , tambahkan saja elemen yang benar-benar transparan dengan ukuran yang sama di atas gambar. Saat Anda mengubah ukuran gambar, pastikan untuk mengubah ukuran elemen.

Ini harus bekerja untuk sebagian besar browser, bahkan yang lebih lama.

Sablefoste
sumber

Nonaktifkan menyeret gambar dari halaman HTML

Jawaban: