HTML Academy · Урок

Объект dataTransfer

Передавайте данные между источником перетаскивания и областью сброса

«Объект dataTransfer» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что содержит dataTransfer

Объект dataTransfer прикреплён к каждому событию перетаскивания и является единственным каналом связи между источником и целью. Он содержит данные, списки файлов, допустимые операции и выбранную операцию сброса.

setData и getData

Источник записывает типизированные данные с помощью e.dataTransfer.setData(format, value). Цель считывает их с помощью e.dataTransfer.getData(format). Оба аргумента являются строками; перед сохранением значения преобразуются в строки.

src.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", "hello");
  e.dataTransfer.setData("application/json", JSON.stringify({ id: 42 }));
});

Несколько типов MIME

Сохранение одних и тех же данных под несколькими типами делает перетаскивание совместимым с разными приложениями: тип «текст без форматирования» работает в любом текстовом редакторе, тип «список URI» распознаётся браузерами как адрес, а тип «HTML» сохраняет оформление в текстовых редакторах. Цель выбирает понятный ей тип.

Ограничения на чтение вне сброса

В целях конфиденциальности браузер предоставляет обработчикам входа и перетаскивания над целью через e.dataTransfer.types только список типов, но не их значения. Фактические данные можно прочитать только внутри события сброса у принимающей цели.

Список файлов

Когда пользователь перетаскивает данные с рабочего стола, e.dataTransfer.files представляет собой FileList с объектами файлов. При перетаскивании, начавшемся внутри страницы, список пуст. Считайте его основным способом обнаружить внешний сброс файла и получить его размер, имя и тип.

Коллекция элементов

e.dataTransfer.items предоставляет и строки, и файлы в виде объектов DataTransferItem. Каждый элемент имеет kind («string» или «file»), type (MIME) и getAsString(cb) / getAsFile(). Коллекция элементов — современная альтернатива, учитывающая типы, по сравнению с files и getData.

for (const item of e.dataTransfer.items) {
  if (item.kind === "file") {
    const file = item.getAsFile();
    console.log(file.name);
  } else {
    item.getAsString((s) => console.log(item.type, s));
  }
}

effectAllowed и dropEffect

effectAllowed задаётся источником в начале перетаскивания и перечисляет поддерживаемые источником операции. dropEffect задаётся целью в обработчике перетаскивания над целью и выбирает одну из этих операций. Если значения не совпадают, браузер отменяет сброс.

Пользовательское изображение перетаскивания

e.dataTransfer.setDragImage(node, x, y) заменяет стандартный ghost. Передайте стилизованный по своему усмотрению элемент DOM, расположенный за пределами экрана, а также смещение курсора относительно этого элемента. Изменение действует только для текущего перетаскивания.

clearData

e.dataTransfer.clearData() удаляет все форматы, а clearData("text/plain") удаляет один формат. Обычно это не требуется, поскольку dataTransfer создаётся заново для каждого перетаскивания, но может пригодиться, если вы начали заполнять данные, а затем решили отменить операцию.

Поведение между источниками

Файлы, перетащенные со страницы источника A на страницу источника B, всё равно передаются — API работает между источниками. Однако принимающая страница видит только то, что источник явно поместил в dataTransfer; произвольный доступ к DOM не предоставляется.

Перетаскивание из браузера на рабочий стол

Записав тип «DownloadURL» (setData("DownloadURL", "image/png:filename.png:https://...")), страница может позволить пользователю перетащить файл из браузера на рабочий стол. Поддержка ограничена (браузерами на основе Chromium), поэтому определяйте её наличие и корректно используйте запасной вариант.

Проверка знаний

Почему dataTransfer.getData() не разрешено возвращать фактически сохранённое значение во время события dragover?

Итоги

dataTransfer — это связующее звено между источником перетаскивания и целью сброса. Используйте setData/getData для типизированных строковых данных, items для единого представления файлов и строк, files для сброса с рабочего стола, setDragImage для пользовательских превью, а effectAllowed/dropEffect — для согласования операции.

Часто задаваемые вопросы

Урок «Объект dataTransfer» бесплатный?

Да — полный текст урока «Объект dataTransfer» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Объект dataTransfer»?

Передавайте данные между источником перетаскивания и областью сброса Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Объект dataTransfer»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy