Как убрать призрака при перетаскивании в CSS/JS: способы

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

Для блокировки перетаскивания изображения установите атрибут draggable="false" для элемента <img> и добавьте в CSS user-select: none;, чтобы исключить случайное выделение текста. Изпользуйте JavaScript для блокирования событий dragstart.

<img src="image.png" draggable="false" style="user-select: none;">

document.addEventListener('dragstart', function(event) {
  event.preventDefault();
});

Разбор методик блокировки перетаскивания

Давайте детально рассмотрим данный вопрос для лучшего понимания и управления процессом перетаскивания.

Полное запрещение перетаскивания

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

/* Секретный режим: каждый элемент остаётся недвижимым */
* {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
}

Такое действие схоже с командой "Стоять на месте!" каждому элементу на вашем сайте.

Подробнее об этом расскажет наш спикер на видео

Предотвращение перетаскивания в браузерах на движке Webkit

В браузерах на движке Webkit может понадобиться свойство -webkit-user-drag:

/* Указания для Webkit */
.no-drag {
  -webkit-user-drag: none;
  user-select: none;
}

Следующий JavaScript убедит браузер в необходимости исполнения ваших правил:

element.setAttribute('draggable', false);
element.ondragstart = function() { return false; };

Поддержка функциональности

Использование pointer-events: none; помогает изолировать элемент от взаимодействия, однако это скажется на всем спектре интеракций, включая клики и наведение, так что применяйте это свойство взвешенно:

/* Бережное применение */
.no-pointer-events {
  pointer-events: none;
}

Не отключайте все события в JavaScript. Важно поддерживать отзывчивость приложения:

element.ondragstart = function(event) { event.preventDefault(); };

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

Примем за данность, что у вас на странице есть наклейка (🏷️), которую вы хотите неподвижно закрепить:

Не разрешаем перетаскивание наклейки: (🚫🖐️🏷️)

Применим надёжные CSS/JS методы, чтобы все оставалось на своём месте:

.sticker {
  user-drag: none; /* 🚫 Перетащить нельзя! */
  user-select: none; /* 🤐 Выделение запрещено */
}

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

document.querySelector('.sticker').addEventListener('dragstart', function(event) {
  event.preventDefault(); // "Ты останешься здесь!" 🧙‍♂️
});

Теперь наклейка (🏷️) навечно прикреплена к вашей странице — перетаскивание невозможно.

Управление тач-взаимодействиями на мобильных устройствах

Устройства с сенсорным управлением имеют свои особенности 🕺, и draggable="false" их не останавливает. Для них нужно применять специфичное свойство в CSS:

/* Оптимизация под мобильные устройства */
.no-drag {
  touch-action: none;
}

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

Нюансы взаимодействия с элементами

При обработке интеракций с помощью JavaScript учитывайте клики:

element.addEventListener('mousedown', function(event) {
  if (event.target.classList.contains('no-drag')) {
    event.preventDefault();
  }
});

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

Универсальность и совместимость

Каждый браузер — это как каждый гость на вечеринке. Подготовьте для каждого из них кроссбраузерные CSS правила:

/* Строгий дресс-код для «вечеринки браузеров» */
.no-drag {
  user-select: none;
  -moz-user-select: none; /* Для Firefox */
  -webkit-user-drag: none; /* Для Webkit */
  -ms-user-select: none; /* IE ведь ещё помните? */
}

А JavaScript DJ обеспечивает энергетику кроссбраузерности:

/* Вибрации старой школы IE */
var isIE = /Trident/.test(navigator.userAgent);

/* Специально для любителей IE */
if (isIE) {
  element.setAttribute('unselectable', 'on'); // Атрибут специфичный для IE
}

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

1. Операции перетаскивания – Веб API | MDN – Подробное руководство по операциям драг-н-дропа в вебе и соответствующему API.
2. HTML Drag and Drop API – Учебный ресурс для быстрого освоения Drag and Drop в HTML5.
3. Drag and Drop File Uploading | CSS-Tricks – Практическое руководство по реализации функции загрузки файлов через перетаскивание.
4. Метод: preventDefault() события – Веб API | MDN – Подробное описание, как отменить стандартное действие браузера.
5. Создание перетаскиваемого элемента в JavaScript | KIRUPA – Пошаговое руководство по созданию перетаскиваемых элементов с помощью JavaScript.
6. DataTransfer – Веб API | MDN – Глубокое погружение в объект DataTransfer.