Wyłącz przeciąganie obrazu ze strony HTML

195

Muszę umieścić obraz na mojej stronie. Chcę wyłączyć przeciąganie tego obrazu. Próbuję wielu rzeczy, ale bez pomocy. Czy ktoś może mi pomóc?

Nie chcę zachować tego obrazu jako obrazu tła, ponieważ zmieniam jego rozmiar.

javascript jquery html css image Użytkownik 1034
źródło
15
@AgentConundrum - Nie ma dla mnie problemu, jeśli użytkownik zapisuje i robi, co chce. Moim jedynym wymaganiem jest, aby nie przeciągać tego obrazu.
Użytkownik 1034,

Odpowiedzi:

262

Możesz to polubić ...

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

Zobacz, jak działa (a raczej nie działa)

Wygląda na to, że używasz jQuery.

$('img').on('dragstart', function(event) { event.preventDefault(); });
alex
źródło
9
@alex - Celem braku przeciągania obrazu nie jest kradzież obrazu. Cel jest zupełnie inny. Sprawiam, że ten obraz jest sortowalny i możliwy do usunięcia. Wyjaśnienie tego zajmuje dużo czasu.
Użytkownik 1034,
2
@alex - Czy ondragstart jest niezależny od przeglądarki?
Użytkownik 1034,
1
@AdamMerrifield Spróbuj $(document)zamiast$(window)
rybo111
2
Właśnie $('img').on('dragstart', false);
wymyśliłem
2
@alex Pod opieką:The value false is also allowed as a shorthand for a function that simply does return false.
Adam Merrifield
174

Rozwiązanie tylko CSS: użyj pointer-events: none

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

mikhuang
źródło
3
Ale to prowadziło do dziwnego efektu selekcji przynajmniej w FF. Lepiej nadal zwracaj fałsz;
Bhumi Singhal
nie jest używany, gdy obraz jest łączem.
Nilesh patel
3
Wygląda na to, że to nie zadziała w IE (dowolnej wersji) patrz: caniuse.com/pointer-events
Justin Tanner
8
Również CSS tylko rozwiązanie: umieścić element nadimg .
alex
6
-1! Należy tego użyć, aby zapobiec WSZYSTKIM zdarzeniom ponter (w tym przeciąganie, na przykład, gdy chcesz załadować obraz). Użyj rozwiązania javascript isntead!
Denys Vitali,
130

po prostu dodaj draggable = "false" do tagu obrazu:

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

IE8 i poniżej nie obsługuje jednak.

dmo
źródło
Używam Magento, więc moja div jak: <div class = "product-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </div> Jak mogę ograniczyć kliknięcie prawym przyciskiem i nie można przeciągać mój wizerunek div. @dmo
Gem
41 
window.ondragstart = function() { return false; }
Ben
źródło
4
+1 Nie rozumiem głosów negatywnych. To nie jest najlepsze rozwiązanie, ponieważ zapobiega przeciągnięciu wszystkiego, nie tylko specjalnego obrazu. Ale pokazuje właściwy kierunek (i myślę, że to pierwsza odpowiedź, która to robi)
Dr.Molle,
@DrMolle Być może była to odpowiedź na (od momentu usunięcia) komentarze pozostawione przez Steve'a na mojej odpowiedzi .
alex
2
Pamiętaj, że czasami ludzie przeciągają link do paska zakładek - to rozwiązanie usuwa tę możliwość.
jClark,
33

najprostszym rozwiązaniem dla wielu przeglądarek jest 

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

problem z

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;
}

jest to, że nie działa w Firefox

imal hasaranga perera
źródło
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;
}

Użyłem go na mojej stronie internetowej http://www.namdevmatrimony.in/ To działa jak magia !!! :)

Namdev Matrimony
źródło
6
Można go przeciągać w firefoxie
Dean Christian Armada,
24

Spróbowałem i okazało się, że to działa.

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

Jestem pewien, że wyłącza to przeciąganie wszystkich obrazów. Nie jestem pewien, czy wpływa to na coś innego.

Użytkownik 1034
źródło
3
Ach! Powinieneś wspomnieć, że używasz jQuery / mógłbyś użyć jQuery. +1 za korzystanie z jQuery.
Alex
@alex - przepraszam. Próbowałem tego sam. I nie jestem pewien, czy to wpływa na coś innego.
Użytkownik 1034,
jesteś w porządku! Nie, o ile mi wiadomo, robienie tego, co tu masz, nie powinno mieć negatywnego wpływu na nic innego.
Alex
2
Co się stanie, jeśli obraz zostanie zawinięty w <a>znacznik? Jeśli użytkownik kliknie obraz, link nie zostanie kliknięty.
SeinopSys
Dzięki. Przy okazji działa to również w GWT z `event.preventDefault ();`.
Johanna
14

Zobacz tę odpowiedź ; w Chrome i Safari możesz użyć następującego stylu, aby wyłączyć domyślne przeciąganie:

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

Możesz spróbować wybrać użytkownika dla przeglądarki Firefox i IE (10+):

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element
mhu
źródło
11

Możesz dodać następujące elementy do każdego obrazu, którego nie chcesz przeciągać (wewnątrz imgtagu):

onmousedown="return false;"

na przykład 

img src="Koala.jpg" onmousedown="return false;"
BOBO
źródło
10

Ten kod robi dokładnie to, co chcesz. Zapobiega przeciąganiu obrazu, jednocześnie umożliwiając wszelkie inne działania zależne od zdarzenia.

$("img").mousedown(function(e){
    e.preventDefault()
});
Robert
źródło
9

Bezpośrednio użyj tego: ondragstart="return false;"w swoim tagu obrazu.

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

Jeśli masz wiele zdjęć zawiniętych w <div>tag:

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

Działa we wszystkich głównych przeglądarkach.

Jan
źródło
8

Ponieważ moje obrazy zostały utworzone przy użyciu ajax, a zatem nie są dostępne w windows.load.

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

W ten sposób mogę kontrolować, która sekcja blokuje zachowanie, używa tylko jednego powiązania zdarzenia i działa dla przyszłych obrazów utworzonych przez ajax bez konieczności robienia czegokolwiek.

Z nowym onwiązaniem jQuery :

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (dzięki @ialphan)

guzart
źródło
1
Użycie .on będzie wyglądało tak: $ (document) .on ('dragstart', 'img', function (e) {e.preventDefault ();});
ialphan
To jest właściwe rozwiązanie. Jedno wydarzenie wiążące dla nieograniczonej liczby imgelementów, obecnych lub przyszłych. Najmniej intensywny, najbardziej wytrzymały.
niedźwiedź
5 
<img draggable="false" src="images/testimg1.jpg" alt=""/>
Mustafa
źródło
4

Świetne rozwiązanie, miał jeden mały problem z konfliktami, jeśli ktoś inny ma konflikt z innej biblioteki js, po prostu nie włączaj takiego konfliktu.

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

Mam nadzieję, że to komuś pomoże.

Paweł
źródło
3

Cóż, nie wiem, czy odpowiedzi tutaj pomogły wszystkim, czy nie, ale oto prosta sztuczka CSS, która zdecydowanie pomoże ci wyłączyć przeciąganie i zaznaczanie tekstów na stronie HTML.

Na swojej <body>tag Dodaj ondragstart="return false". Spowoduje to wyłączenie przeciągania obrazów. Ale jeśli chcesz również wyłączyć zaznaczanie tekstu, dodaj onselectstart="return false".

Kod będzie wyglądał następująco: <body ondragstart="return false" onselectstart="return false">

Abhisek Das
źródło
3

Możesz uznać moje rozwiązanie za najlepsze. Większość odpowiedzi nie jest zgodna ze starymi przeglądarkami, takimi jak IE8, ponieważ e.preventDefault () nie będzie obsługiwany, podobnie jak zdarzenie ondragstart . Aby to zrobić w przeglądarce, musisz zablokować zdarzenie mousemove dla tego obrazu. Zobacz przykład poniżej:

jQuery

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

bez 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 });
}

przetestowane i działające nawet dla IE8

CodeGems
źródło
3

Ustaw następujące właściwości CSS na obrazie:

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
Omid Farvid
źródło
1
Wygląda na to, że nie działa w przeglądarce Firefox (Mac Mac 69)
Ben Wheeler,
2

Cóż, jest to możliwe, a pozostałe opublikowane odpowiedzi są całkowicie poprawne, ale można zastosować podejście brutalnej siły i zapobiec domyślnemu zachowaniu mousedownobrazów. Który polega na rozpoczęciu przeciągania obrazu.

Coś takiego:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};
Alex
źródło
2

Możesz do tego użyć kodu wbudowanego

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

Drugą opcją jest użycie zewnętrznego lub na stronie css 

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">
Rozwiń fragment kodu

Oba działają poprawnie Używam zewnętrznego css na tej stronie (kliknij tutaj)

Abhishek kamal
źródło
Żaden z nich nie działa na Firefox (przy użyciu Maca Firefox 69)
Ben Wheeler,
2

jQuery:

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

Możesz zastąpić selektor nadwozia dowolnym innym pojemnikiem, którego dzieci nie mogą zostać przeciągnięte i upuszczone.

Lis
źródło
1

Odpowiedź jest prosta:

<body oncontextmenu="return false"/>- wyłącz kliknięcie prawym przyciskiem myszy <body ondragstart="return false"/>- wyłącz przeciąganie myszy <body ondrop="return false"/>- wyłącz upuszczanie myszy

Zdobyć
źródło
-1

Zrobiłem pokazane tutaj właściwości css, a także monitorowałem ondragstart za pomocą następującego javascript:

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },
Alocus
źródło
-2

Kradnąc z mojej własnej odpowiedzi , po prostu dodaj do obrazu całkowicie przezroczysty element o tym samym rozmiarze. Podczas zmiany rozmiaru obrazu pamiętaj o zmianie rozmiaru elementu.

Powinno to działać w przypadku większości przeglądarek, nawet starszych.

Sablefoste
źródło