Визуальная обратная связь при перетаскивании
Стилизуйте элементы во время перетаскивания.
«Визуальная обратная связь при перетаскивании» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Зачем нужна визуальная обратная связь
Хорошая реализация перетаскивания показывает пользователю, что происходит: какой элемент перемещается, куда его можно поместить и допустим ли сброс. Без обратной связи взаимодействие кажется неисправным.
Оформление перетаскиваемого элемента
Сделайте исходный элемент полупрозрачным или уменьшите его в dragstart, чтобы пользователь видел, какой элемент он выбрал.
item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));Событие входа при перетаскивании
dragenter срабатывает, когда перетаскиваемый элемент входит в потенциальную цель. Используйте его, чтобы выделить зону.
zone.addEventListener("dragenter", (e) => {
e.preventDefault();
zone.classList.add("drag-over");
});Событие выхода при перетаскивании
dragleave срабатывает, когда элемент покидает цель. Здесь снимите выделение.
zone.addEventListener("dragleave", () => {
zone.classList.remove("drag-over");
});Проблема мерцания
dragenter/dragleave срабатывают также для дочерних элементов, вызывая мерцание. Счётчик или проверка relatedTarget сохраняет стабильность выделения.
let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });Сброс состояния при сбросе
Всегда очищайте состояние выделения в обработчике drop, поскольку при успешном сбросе событие dragleave может не сработать.
zone.addEventListener("drop", (e) => {
e.preventDefault();
depth = 0;
zone.classList.remove("drag-over");
});Настройка изображения перетаскивания
setDragImage(element, offsetX, offsetY) в dragstart заменяет стандартный ghost любым элементом.
item.addEventListener("dragstart", (e) => {
const ghost = document.getElementById("custom-ghost");
e.dataTransfer.setDragImage(ghost, 20, 20);
});Курсор через dropEffect
Вид курсора (плюс для копирования, стрелка перемещения или запрет сброса) определяется свойством dropEffect, заданным в dragover. Отклоняйте недопустимые сбросы с помощью значения "none".
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});Отображение заполнителя для сброса
В сортируемых списках вставляйте элемент-заполнитель в предполагаемую позицию сброса, чтобы пользователь точно видел, куда попадёт элемент.
function showPlaceholder(beforeEl) {
list.insertBefore(placeholder, beforeEl);
}Вычисление позиции вставки
Сравнивайте координату Y указателя с вертикальной серединой каждого элемента, чтобы определить, вставлять его перед элементом или после него.
function getAfterElement(container, y) {
const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
return items.find((el) => {
const box = el.getBoundingClientRect();
return y < box.top + box.height / 2;
});
}Обратная связь для доступности
Одни только визуальные подсказки исключают пользователей клавиатуры и средств чтения с экрана. Для доступности дополните перетаскивание объявлениями ARIA live и альтернативным управлением с клавиатуры.
Быстрая проверка
Проверьте визуальную обратную связь.
Итоги: визуальная обратная связь
Вы оформили перетаскиваемый элемент, выделяли зоны с помощью dragenter/dragleave, устранили мерцание счётчиком depth, настроили изображение перетаскивания, управляли курсором через dropEffect и показывали заполнители для сброса. Далее — перетаскивание файлов.
Часто задаваемые вопросы
Урок «Визуальная обратная связь при перетаскивании» бесплатный?
Да — полный текст урока «Визуальная обратная связь при перетаскивании» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Визуальная обратная связь при перетаскивании»?
Стилизуйте элементы во время перетаскивания. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Визуальная обратная связь при перетаскивании»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Создание перетаскиваемых элементов
- Цели для сброса и dataTransfer
- Визуальная обратная связь при перетаскивании
- Перетаскивание файлов на страницу