Запрет на перетаскивание изображения в HTML: методы и код

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

Для того чтобы предотвратить возможность перетаскивания изображения со страницы, добавьте к тегу <img> атрибут draggable="false":

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

Также, с помощью JavaScript, можно обработать событие начала перетаскивания так, чтобы исключить из него изображения:

document.addEventListener('dragstart', event => {
  if (event.target.tagName === 'IMG') event.preventDefault();
});

И тот, и другой способ помогут исключить случайное перемещение изображений за курсором.

Совместимость с браузерами

К сожалению, вопросы совместимости с различными браузерами остаются актуальными. Атрибут draggable="false" эффективен в большинстве современных браузеров, однако старые версии Firefox могут его игнорировать. Поэтому всегда стоит проверить работоспособность вашего решения в разных браузерах.

Можно также отключить перетаскивание для всех элементов на странице с помощью следующего кода:

window.ondragstart = function() { return false; };

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

CSS может пригодиться

CSS также предлагает решение проблемы перетаскивания – ей служит свойство pointer-events:

img {
    pointer-events: none;
}

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

Размеры изображений можно изменять, но место их останется прежним

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

document.addEventListener('mousedown', event => {
  if(event.target.tagName === 'IMG') {
    // Здесь нужно реализовать логику масштабирования
  }
});

Тем не менее, изображения останутся "размещенными" на своем месте.

jQuery – ваш помощник

Для поклонников jQuery существует собственное решение проблемы:

$('img').on('dragstart', function(event) { event.preventDefault(); });

Этот код выглядит лаконично, но если до этого у вас не было нужды в jQuery, не стоит его подключать только из-за этой функциональности.

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

Представьте себе галерею, где каждая картина надежно закреплена на стене:

Стена с картинами: 🖼🔒🖼 🔒🖼🔒

Здесь символ 🔒 символизирует ваш CSS-код, который "замораживает" изображения:

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

Таким образом, картинки остаются красивыми и неподвижными.

Ваши изображения остаются адаптивными

Используемые вами методы не повлияют на адаптивность изображений.

Не забывайте о доступности

Запомните: использование атрибута draggable="false" не затрудняет доступность информации о изображениях для скринридеров.

Опасность браузерных "ловушек"

Старайтесь избегать использования специфичных для отдельных браузеров свойств типа -moz-user-select и им подобных. Они как непредсказуемые друзья. Предпочтение лучше отдать стандартам, проверенным временем.

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

1. draggable – HTML: HyperText Markup Language | MDN — подробная информация об атрибуте draggable.
2. HTML Drag and Drop API | W3Schools — введение в функционал перетаскивания.
3. HTML5 draggable='false' not working in Firefox browser – Stack Overflow — обсуждение проблем перетаскивания в различных браузерах.
4. Разница между 'return false;' и 'e.preventDefault();' | CSS-Tricks — искусство предотвращения стандартных действий.
5. HTML Standard | WHATWG — официальная спецификация API перетаскивания.
6. HTMLElement: событие dragstart – Web APIs | MDN — подробная информация о событии dragstart.