it-roy-ru.com

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

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

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

187
User 1034

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

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

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

24
User 1034

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

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

Видите, это работает (или не работает, скорее)

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

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

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

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

145
mikhuang

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

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

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

114
dmo
window.ondragstart = function() { return false; } 
41
Ben

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

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

проблема с

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

в том что он не работает в firefox

26
imal hasaranga perera
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
Namdev Matrimony

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

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

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

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

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

onmousedown="return false;"

например.

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

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

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

Непосредственно используйте это: 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>

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

9
Jan

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

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

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

С jQuery новая on привязка:

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

8
guzart

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

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
4
Omid Farvid

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

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

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

4
Paul

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

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

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

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

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

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

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

Вы можете считать мое решение лучшим. Большинство ответов несовместимы со старыми браузерами, такими как 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
CodeGems
document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

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

2
dtothefp