Остановить щелчок Chrome и удерживать / перетаскивать изображение по умолчанию

Question

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

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

Как я могу это сделать?

Answer 1

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

-webkit-user-drag: auto | element | none;

Смотрите документ -webkit-user-drag CSS-infos.net (я не нашел документ MDN, если у кого-то есть лучшая ссылка)

---

Как пользоваться

Добавить .nonDraggableImage класс на вашем img теги и добавьте в свой CSS:

.nonDraggableImage{
    -webkit-user-drag: none;
}

Answer 2

Мне пришлось использовать другое решение, чтобы оно заработало:

<img src="http://placehold.it/150x150" draggable="false">

Спасибо: /questions/42223129/css-js-chtobyi-predotvratit-peretaskivanie-prizrachnogo-izobrazheniya/42223143#42223143

Answer 3

Другой способ - создать прозрачную картинку поверх картинки, которую вы хотите предотвратить.

Пожалуйста, смотрите: http://www.dwuser.com/education/content/stop-the-thieves-strategies-to-protect-your-images/

проверьте в разделе "Обманщик загрузчиков"

Answer 4

Мне нравится использовать - перетаскиваемый

перетаскиваемый = "ложь"

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

Но можно попробовать - ondragstart

ondragstart="возвратить ложь;"

      <img ondragstart="return false;" src="image.jpg">

или - события-указатели (некоторые браузеры не поддерживают, а также имеют другие проблемы)

стиль = "события указателя: нет;"

      <img src="image.jpg" style="pointer-events: none;">