Цели для сброса и dataTransfer
Принимайте сброшенные объекты и передавайте данные.
«Цели для сброса и dataTransfer» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Что делает элемент целевым для сброса?
По умолчанию элементы отклоняют сброс данных. Чтобы принять сброс, необходимо предотвратить стандартное поведение и в dragover, и в drop. Это самая распространённая причина ошибок.
Разрешение сброса при наведении
Браузер блокирует сброс, если в обработчике dragover не вызвать preventDefault(). Без этого событие drop никогда не сработает.
const zone = document.getElementById("dropzone");
zone.addEventListener("dragover", (e) => {
e.preventDefault(); // REQUIRED to allow drop
});Событие сброса
Когда пользователь отпускает кнопку над допустимой целью, срабатывает событие drop. Здесь также отмените действие по умолчанию (это не позволяет браузеру открыть сброшенные файлы или адреса) и прочитайте данные.
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
console.log("Dropped", id);
});Чтение dataTransfer
getData(format) извлекает данные, сохранённые в dragstart. Строка формата должна совпадать с установленным форматом.
const payload = e.dataTransfer.getData("text/plain");Перемещение элемента
Классический пример использования: добавьте перетаскиваемый узел в зону сброса с помощью переданного идентификатора.
zone.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
zone.appendChild(dragged);
});Несколько форматов данных
dataTransfer может одновременно содержать несколько форматов — например, text/plain и application/json, — а цель считывает тот, который ей понятен.
e.dataTransfer.setData("text/plain", "42");
e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));Настройка dropEffect
В dragover установите для dropEffect значение "copy", "move" или "link", чтобы управлять курсором и смыслом операции.
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
});effectAllowed и dropEffect
effectAllowed (задаётся источником) объявляет разрешённые действия, а dropEffect (задаётся целью) выбирает одно из них. Вместе они обеспечивают отображение подходящего курсора.
Изменение порядка списка
Объедините позицию сброса со вставкой, чтобы изменить порядок элементов. Определите, вставлять ли элемент перед элементом под курсором или после него.
list.addEventListener("drop", (e) => {
e.preventDefault();
const id = e.dataTransfer.getData("text/plain");
const dragged = document.getElementById(id);
list.insertBefore(dragged, e.target);
});Определение цели сброса
Используйте e.target (элемент под указателем) и closest(), чтобы найти нужный контейнер, если цели вложены друг в друга.
zone.addEventListener("drop", (e) => {
const slot = e.target.closest(".slot");
if (slot) slot.appendChild(getDragged(e));
});Очистка данных
dataTransfer.clearData() удаляет все сохранённые данные; если передать формат, будет очищен только он. Впрочем, хранилище автоматически сбрасывается после завершения перетаскивания.
e.dataTransfer.clearData("text/plain");Быстрая проверка
Проверьте цели сброса.
Итоги: цели сброса и dataTransfer
Вы создали зоны сброса, вызвав preventDefault() в обработчиках dragover и drop, прочитали payload с помощью getData, переместили и переставили элементы, установили dropEffect и обработали вложенные цели. Далее — визуальная обратная связь.
Часто задаваемые вопросы
Урок «Цели для сброса и dataTransfer» бесплатный?
Да — полный текст урока «Цели для сброса и dataTransfer» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Цели для сброса и dataTransfer»?
Принимайте сброшенные объекты и передавайте данные. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Цели для сброса и dataTransfer»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Создание перетаскиваемых элементов
- Цели для сброса и dataTransfer
- Визуальная обратная связь при перетаскивании
- Перетаскивание файлов на страницу