Отключить перетаскивание изображения с HTML-страницы

Мне нужно поместить изображение на мою страницу. Я хочу отключить перетаскивание этого изображения. Я пытаюсь много чего, но не помогаю. Кто-нибудь может мне помочь ?

Я не хочу держать это изображение в качестве фонового изображения, потому что я изменяю размер изображения.

176
css html image javascript jquery

21 ответов

Вам может понравиться это...

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

смотрите, как он работает (или не работает, скорее)

Кажется, вы используете jQuery.

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

CSS только решение: используйте pointer-events: none

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

138

просто добавьте draggable= "false"в тег изображения:

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

IE8 и под не поддерживают.

108
window.ondragstart = function() { return false; }
38
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;
}

я использовал его на своем веб-сайте в http://www.namdevmatrimony.in/ Это работает как магия!!! :)

24

я попробовал сам и обнаружил, что это работает.

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

Я уверен, что это отключает перетаскивание всех изображений. Не уверен, что это повлияет на что-то еще.

22

самое простое кросс-браузерное решение -

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

посмотреть этот ответ; в Chrome и Safari вы можете использовать следующий стиль, чтобы отключить перетаскивание по умолчанию:

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

можно попробовать пользователей-выберите для Firefox и IE(10+):

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

вы можете добавить к каждому изображению вы не хотите перетаскивать, (внутри img tag):

onmousedown="return false;"

например 

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

этот код делает именно то, что вы хотите. Это предотвращает перетаскивание изображения, позволяя любые другие действия, которые зависят от события.

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

поскольку мои изображения были созданы с помощью ajax и поэтому недоступны в windows.нагрузка.

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

таким образом, я могу контролировать, какой раздел блокирует поведение, он использует только одну привязку событий, и он работает для будущих изображений, созданных ajax, без необходимости что-либо делать.

С jQuery new on обязательные:

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); (спасибо @ialphan)

8

непосредственно используйте это:ondragstart="return false;" в теге изображения. 

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

если у вас есть несколько изображений, завернул на <div> tag:

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

работает во всех основных браузерах.

8

отличное решение, была одна небольшая проблема с конфликтами, Если у кого-то еще есть конфликт из другой библиотеки js, просто не включайте такой конфликт.

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

надеюсь, это поможет кому-то.

4

Ну, я не знаю, помогли ли ответы здесь всем или нет, но вот простой встроенный CSS-трюк, который определенно поможет вам отключить перетаскивание и выбор текстов на HTML-странице.

на <body> добавить тег ondragstart="return false". Это отключит перетаскивание изображений. Но если вы также хотите отключить выделение текста, добавьте onselectstart="return false".

код будет выглядеть так: <body ondragstart="return false" onselectstart="return false">

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

Ну, это возможно, и другие ответы, опубликованные, совершенно действительны, но вы можете принять подход грубой силы и предотвратить поведение по умолчанию mousedown картинки. Который, чтобы начать перетаскивание изображения.

что-то вроде этого:

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};
2
document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

работает в этом Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

2

Вы можете считать мое решение самое лучшее. Большинство ответов несовместимы со старыми браузерами, такими как IE8, так как Эл.метод preventDefault() не будет поддерживаться, а также ondragstart событие. Для этого кросс-браузер совместим вы должны заблокировать mousemove событие для этого изображения. См. пример ниже:

jQuery

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

без 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 });
}

проверен и работал даже на ИЕ8

2

установите следующие свойства CSS для изображения:

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

кража из моего собственного ответ, просто добавьте полностью прозрачный элемент того же размера над изображением. При изменении размера изображения обязательно измените размер элемента.

Это должно работать для большинства браузеров, даже более старых.

-1

Я сделал свойства css, показанные здесь, а также монитор ondragstart со следующим javascript:

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