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

195

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

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

javascript jquery html css image Пользователь 1034
источник

15

@AgentConundrum - для меня нет проблем, если пользователь сохраняет и делает все, что хочет. Мое единственное требование - не перетаскивать это изображение.

Пользователь 1034

264

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

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

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

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

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

Алекс
источник

9

@alex - цель не перетаскивать изображение - не воровать изображение. Цель совершенно другая. Я делаю этот образ как сортируемый и сбрасываемый. Так что это занимает много времени, чтобы объяснить это.

Пользователь 1034

2

@alex - ondragstart не зависит от браузера?

Пользователь 1034

1

@AdamMerrifield Попробуйте $(document)вместо$(window)

rybo111

2

Я только что разработал, вы можете упростить JQuery для:$('img').on('dragstart', false);

rybo111

2

@alex Под обработчиком:The value false is also allowed as a shorthand for a function that simply does return false.

Адам Меррифилд

174

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

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

mikhuang
источник

3

Но это приводит к странному эффекту выбора в FF по крайней мере. Лучше все же вернуть ложь;

Бхуми Сингхал

не используется, когда изображение как ссылка.

Нилеш Патель

3

Похоже, что это не будет работать в IE (любая версия), см .: caniuse.com/pointer-events

Джастин Таннер

8

Также CSS только решение: поместить элемент надimg .

Алекс

6

-1! Это следует использовать для предотвращения ВСЕХ событий понтера (включая перетаскивание, например, когда вы хотите загрузить изображение). Используйте решение javascript еще!

Денис Виталий

131

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

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

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

DMO
источник

Я использую Magento, так что мой div вроде: <div class = "product-img-box"> <? Php echo $ this-> getChildHtml ('media')?> </ Div> Как я могу ограничить правый клик и не перетаскивать мой образ Div. @dmo

Gem

41

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

Бен
источник

4

+1 Не понимаю подвохов. Это не окончательное решение, оно предотвращает перетаскивание всего, а не только специального изображения. Но это показывает правильное направление (и я думаю, что это был первый ответ, который делает это)

Dr.Molle

@DrMolle Возможно, это было в ответ на (после удаления) комментарии, оставленные Стивом на мой ответ .

Алекс

2

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

jClark

33

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

<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

Имал Хасаранга Перера
источник

25

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

Супружество Намдева
источник

6

Это можно перетаскивать в Firefox

Дин Кристиан Армада

24

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

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

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

Пользователь 1034
источник

3

Ах! Вы должны были упомянуть, что используете jQuery / могли бы использовать jQuery. +1 за использование jQuery.

Алекс

@alex - прости. Я пробовал это сам. И я не уверен, что это повлияет на что-то еще.

Пользователь 1034

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

Алекс

2

Что если изображение обернуто внутри <a>тега? Тогда, если пользователь нажимает на изображение, ссылка не будет нажата.

SeinopSys

Спасибо. Кстати, это также работает в GWT с помощью `event.preventDefault ();`.

Йоханна

14

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

MHU
источник

11

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

onmousedown="return false;"

например

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

БОБО
источник

10

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

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

Роберт
источник

9

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

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

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

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

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

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

guzart
источник

1

Используя .on это будет выглядеть так: $ (document) .on ('dragstart', 'img', function (e) {e.preventDefault ();});

ialphan

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

медвежонок

5

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

Мустафа
источник

4

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

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

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

Павел
источник

3

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

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

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

Абхисек дас
источник

3

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

CodeGems
источник

3

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

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

Омид Фарвид
источник

1

Кажется, не работает на Firefox (с использованием Mac Firefox 69)

Бен Уилер

2

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

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

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

Alex
источник

2

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

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

dtothefp
источник

2

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

<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 на этом сайте (нажмите здесь)

Абхишек Камаль
источник

Похоже, что ни один из них не работает на Firefox (с использованием Mac Firefox 69)

Бен Уилер

2

JQuery:

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

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

Lis
источник

1

Ответ прост:

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

Усиление
источник

-1

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

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

Alocus
источник

-2

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

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

Sablefoste
источник

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

Ответы: