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

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

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

21 176
javascript html css jquery image-processing

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> - тег:

<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, так как e. 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 });
}

испытано и работало даже для IE8

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