Запретить перетаскивание картинок css

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

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

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

25 ответов

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

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

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

document.getElementById('my-image').ondragstart = function() < return false; >; 

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

$('img').on('dragstart', function(event) < event.preventDefault(); >); 

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

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

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

window.ondragstart = function()

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

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

Я использовал его на своем сайте по адресу http://www.namdevmatrimony.in/ Это работает как волшебство. )

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

И второй вариант — использовать внешний или на странице CSS

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

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

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

img src="https://stackru.com/questions/32014303/Koala.jpg" onmousedown="return false;" 

Непосредственно используйте это: ondragstart=»return false;» в вашем теге изображения.

Если у вас есть несколько изображений, завернутые в тег:

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

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

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

Таким образом, я могу контролировать, какой раздел блокирует поведение, он использует только одну привязку события и работает для будущих изображений, созданных 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(); >); 

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

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

Вы можете считать мое решение лучшим. Большинство ответов несовместимы со старыми браузерами, такими как IE8, так как не поддерживается e.preventDefault(), а также событие ondragstart. Чтобы сделать это совместимым с браузером, вы должны заблокировать событие mousemove для этого изображения. Смотрите пример ниже:

$("#my_image").mousemove( function(e) < return false >); // fix for IE $("#my_image").attr("draggable", false); // disable dragging from attribute 

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

Источник

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

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

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

22 ответа

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

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

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

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

$(‘img’).mousedown(false) короче. И @SeinopSys Какой браузер вы используете? Это все еще работает по крайней мере для меня (FF v59.0.2). Не проверял с другими браузерами, но здесь скрипка для теста.

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

document.getElementById('my-image').ondragstart = function() < return false; >; 

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

$('img').on('dragstart', function(event) < event.preventDefault(); >); 

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

@alex — Ты слишком сожалеешь об этом. Комментарии стали неактуальными после большого количества правок и после того, как оказалось, что мой ответ не был сорван.

@rybo111 rybo111 Возможно, вы могли бы, но я бы избегал этого, так как a) AFAIK, это не задокументировано jQuery и b) путаница с тем, что он на самом деле будет делать.

@AdamMerrifield Ну вот и все. Стоит отметить, что это также предотвратит распространение, что может быть проблемой.

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

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

Для моей проблемы (я не хотел никакого взаимодействия вообще в div) это работало для современных браузеров

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

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

Я использую Magento, так что мой div вроде:

window.ondragstart = function()

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

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

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

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

заключается в том, что он не работает в firefox

Я использовал его на своем веб-сайте в 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 ):

img src="https://overcoder.net/q/27152/Koala.jpg" onmousedown="return false;" 

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

Непосредственно используйте это: ondragstart=»return false;» в теге изображения.

Если у вас несколько изображений, завернутых в тег :

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

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

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

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

$(‘#page’).on(‘dragstart’, ‘img’, function(event) < event.preventDefault(); >); (спасибо @ialphan)

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

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

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

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

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

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

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

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

Вы можете считать мое решение лучшим. Большинство ответов несовместимы со старыми браузерами, такими как IE8, поскольку e.preventDefault() не поддерживается, а также ondragstart. Чтобы сделать это кросс-браузер совместимым, вам нужно заблокировать событие mousemove для этого изображения. См. Пример ниже:

$("#my_image").mousemove( function(e) < return false >); // fix for IE $("#my_image").attr("draggable", false); // disable dragging from attribute 

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

Источник

Как добавить картинку, так чтобы удержав её нельзя было перетаскивать?

Div для секции с отзывами неправильно выравнивается с Bootstrap. Как решить эту проблему?

Настройка шрифта HTML + CSS?

Почему при публикации проекта на git pages в браузере отображается файл readme?

Почему Джанго не подгружает картинку в CSS и браузер выдает ошибку 404?

Можно ли округлить число в CSS или какой костыль можно придумать?

Почему код для замены текста в кнопке один работает, а второй нет, кто понимает разницу?

Почему bottom:0 не работает?

Как вывести строку с Rust в HTML с помощью Tauri?

В css для header, а он не изменяется. Можете указать на ошибки?

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

Минуточку внимания

• Отсутсвие рекламы с немецким VPN на Youtube почему?
  • 3 подписчика
  • 1 ответ
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 3 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 3 ответа

  Источник

  Запрещение перетаскивания изображения зажатием мыши в браузере

  

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

  Обсуждения

  

  http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

  

  margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

  row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
  row 2 cell 1	row 2 cell 2
  row 3 cell 1	row 3 cell 2
  row 4 cell 1	row 4 cell 2
  row 5 cell 1	row 5 cell 2	row 5 cell 3
  row 6 cell 1	row 6 cell 2	row 5 cell 3

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

  Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

  

  тогда как выше предложили пустую строку

  row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
  row 2 cell 1	row 2 cell 2
  row 3 cell 1	row 3 cell 2
  row 4 cell 1	row 4 cell 2
  row 5 cell 1	row 5 cell 2		row 5 cell 3
  row 6 cell 1	row 6 cell 2	row 5 cell 3

  или если подсветка ячеек не обязательна, то можно так

  row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
  row 2 cell 1	row 2 cell 2
  row 3 cell 1	row 3 cell 2
  row 4 cell 1	row 4 cell 2
  row 5 cell 1	row 5 cell 2	row 5 cell 3
  row 6 cell 1	row 6 cell 2	row 5 cell 3

  Источник

  Читайте также:  Java try catch все исключения