Мне нужно разместить изображение на моей странице. Я хочу отключить перетаскивание этого изображения. Я пытаюсь многое, но не помогаю. Может кто-нибудь помочь мне?
Я не хочу сохранять это изображение в качестве фонового изображения, потому что я изменяю размер изображения.
Я попробовал себя и обнаружил, что это работает.
$("img").mousedown(function(){
return false;
});
Я уверен, что это отключает перетаскивание всех изображений. Не уверен, что это влияет на что-то еще.
Вам может понравиться это...
document.getElementById('my-image').ondragstart = function() { return false; };
Посмотрите, как работает (или не работает, скорее)
Кажется, вы используете jQuery.
$('img').on('dragstart', function(event) { event.preventDefault(); });
Решение только для CSS: используйте pointer-events: none
просто добавьте draggable = "false" в ваш тег изображения:
<img draggable="false" src="image.png">
IE8 и ниже не поддерживают.
window.ondragstart = function() { return false; }
Простейшее решение для кросс-браузера
<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
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/ Он работает как волшебство!!!:)
Смотрите ответ; в Chrome и Safari вы можете использовать следующий стиль, чтобы отключить перетаскивание по умолчанию:
-webkit-user-drag: auto | element | none;
Вы можете попробовать user-select для Firefox и IE (10 +):
-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element
Вы можете добавить следующее к каждому изображению, которое вы не хотите перетаскивать (внутри тега img):
onmousedown="return false;"
например.
img src="Koala.jpg" onmousedown="return false;"
Этот код делает именно то, что вы хотите. Это предотвращает перетаскивание изображения, позволяя любым другим действиям, зависящим от события.
$("img").mousedown(function(e){
e.preventDefault()
});
Непосредственно используйте это: 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>
Работает во всех основных браузерах.
Так как мои изображения были созданы с использованием ajax и поэтому недоступны в windows.load.
$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });
Таким образом, я могу контролировать, какой раздел блокирует поведение, он использует только одно связывание событий и работает для будущих созданных изображений ajax без необходимости делать что-либо.
С новой привязкой jQuery on:
$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); });
(спасибо @ialphan)
Отличное решение, имело одну небольшую проблему с конфликтами, Если кто-то другой конфликтует с другой js-библиотекой, просто не разрешайте конфликт таким образом.
var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });
Надеюсь, это поможет кому-то.
Задайте следующие свойства CSS для изображения:
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
Ну, я не знаю, помогли ли все ответы здесь или нет, но вот простой встроенный CSS-трюк, который определенно поможет вам отключить перетаскивание и выбор текстов на странице HTML.
В тэге <body> добавьте ondragstart="return false". Это отключит перетаскивание изображений. Но если вы также хотите отключить выбор текста, добавьте onselectstart="return false".
Код будет выглядеть так: <body ondragstart="return false" onselectstart="return false">
<img draggable="false" src="images/testimg1.jpg" alt=""/>
Ну, это возможно, и другие опубликованные ответы абсолютно верны, но вы можете применить подход грубой силы и предотвратить поведение по умолчанию mousedown на изображениях по умолчанию. Который, должен начать перетаскивать изображение.
Что-то вроде этого:
window.onload = function () {
var images = document.getElementsByTagName('img');
for (var i = 0; img = images[i++];) {
img.ondragstart = function() { return false; };
}
};
document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
e.preventDefault();
});
Работает в этом Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml
Вы можете считать мое решение лучшим. Большинство ответов несовместимы со старыми браузерами, такими как 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
Ответ прост:
<body oncontextmenu="return false"/> - отключить щелчок правой кнопкой мыши <body ondragstart="return false"/> - отключить перетаскивание мышью <body ondrop="return false"/> - отключить <body ondrop="return false"/> мыши
Попадая из моего собственного ответа, просто добавьте полностью прозрачный элемент того же размера по сравнению с изображением. При изменении размера изображения не забудьте изменить размер элемента.
Это должно работать для большинства браузеров, даже более старых.
Я показал свойства css, показанные здесь, а также монитор ondragstart со следующим javascript:
handleDragStart: function (evt) {
if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
evt.preventDefault();
return false;
}
},
Вы можете использовать встроенный код для этого
<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">