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

195

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

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

— Пользователь 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
источник