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