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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

window.ondragstart = function() { return false; } 

Answer 6

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

<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

Answer 7

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/ Это работает как волшебство!!!:)

Answer 8

Вы можете использовать встроенный код для этого

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

И второй вариант - использовать внешний или на странице 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">

Оба работают правильно Я использую внешние CSS на этом сайте (нажмите здесь)

Answer 9

Смотрите этот ответ; в 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

Answer 10

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

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

Answer 11

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

onmousedown="return false;"

например

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

Answer 12

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

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

Answer 13

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

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

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

С JQuery новым on связывание:

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

Answer 14

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

Answer 15

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

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

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

Answer 16

Вы можете считать мое решение лучшим. Большинство ответов несовместимы со старыми браузерами, такими как 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

Answer 17

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

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

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

Answer 18

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

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

Answer 19

J Query:

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

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

Answer 20

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

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

Answer 21

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

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

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

Answer 22

Ответ прост:

<body oncontextmenu="return false"/> - отключить щелчок правой кнопкой мыши <body ondragstart="return false"/> - отключить перетаскивание мышью <body ondrop="return false"/> - отключить падение мыши

Answer 23

Элегантный способ сделать это с JQuery

      $("body").on('mousedown','img',function(e){
    e.stopPropagation();
    e.preventDefault();
});

Answer 24

Просто используйтеe.preventDefault(). Примеры:

Чистый HTML:

      <img
  src={item.icon}
  onmousedown={(e) => {
    e.preventDefault()
  }}
/>

Реагировать

      <img
  src={item.icon}
  onMouseDown={(e) => {
    e.preventDefault()
  }}
/>

Answer 25

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

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

Answer 26

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

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