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

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

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

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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Спасибо: fooobar.com/info/38175/...