CSS решение: Как сделать изображение не перетаскиваемым в Firefox

Быстрый ответ

Для того, чтобы недолго запретить перетаскивание и выделение изображений с помощью CSS, используйте свойства user-select: none;, отключающее выделение, и -webkit-user-drag: none; — блокирующее перетаскивание в браузерах с движком WebKit. Для стабильного функционирования в остальных браузерах добавьте атрибут draggable="false":

<style>
  img {
    -webkit-user-drag: none;
    user-select: none;
  }
</style>

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

Такой код не даст вашему изображению перемещаться с места.

Детальная совместимость с браузерами

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

img {
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  unselectable="on";
}

Использование вендорных префиксов -webkit-, -moz- и -ms- позволяет обеспечить совместимость с различными браузерами. Свойство pointer-events: none; отключает все события мыши, а атрибут unselectable="on" обеспечивает поддержку устаревших версий Internet Explorer и Opera.

Альтернативные способы представления неинтерактивных изображений

Если вам не нужно взаимодействие с изображением, используйте div с background-image вместо img:

<style>
  .non-interactive-image {
    background-image: url('image.jpg');
    height: 200px;
    width: 200px;
  }
</style>

<div class="non-interactive-image"></div>

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

Визуализация

Представьте изображение как места неподвижного садового гнома. Вот как это выглядит в коде CSS:

img {
  pointer-events: none;
  user-select: none;
}

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

Без применения CSS:   🕊️🛫🕊️🛫🕊️ – Изображение свободно, словно бабочка в полёте.
С применением CSS:    🕊️❌       – Изображение неподвижно, как устойчиво стоящий дуб.

И всё это достигается без использования JavaScript.

Глубокое изучение CSS-свойств

Важно хорошо освоить ключевые свойства CSS:

• user-select: none;: свойство, блокирующее выбор элемента.
• -webkit-user-drag: none;, -moz-user-select: none;: вендорные префиксы, обеспечивающие совместимость со старыми версиями браузеров.
• pointer-events: none;: свойство, делающее элемент недоступным для событий мыши.

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

Тонкости использования: ошибки, которые стоит избегать

CSS может обеспечить различное поведение в разных браузерах, поэтому тестирование необходимо. Сенсорные события на мобильных устройствах могут игнорировать pointer-events: none;, что следует учесть при разработке. Неверное применение pointer-events может полностью отключить взаимодействие с интерактивными элементами.

Полезные материалы

1. user-select – CSS: Cascading Style Sheets | MDN — для глубокого изучения user-select в CSS.
2. user-select | CSS-Tricks — пошаговое руководство по использованию user-select.

Завершение

Время и практика делают своё дело. Если эта информация помогла вам сделать изображения неподвижными, не забудьте её оценить. Удачи вам в кодинге!👩‍💻