Загрузка...

HTML Drag and Drop

Ранее Geolocation запрашивал координаты после разрешения. Этот урок уходит от координат и знакомит с HTML Drag and Drop: отметить что можно тащить, нести малую нагрузку через dataTransfer и решить, что делать при drop. Практика — draggable, preventDefault, перенос или метка — не sortable-библиотека и не upload-приложение.

Зачем drag and drop в курсе HTML

Новички часто хотят перетащить карточку в коробку. Нативный DnD — первая обычная API. После Geolocation разделение иное: HTML отмечает источники; JS владеет событиями и смыслом drop.

Прямой ответ

1) draggable="true". 2) setData в dragstart. 3) preventDefault на dragover. 4) В drop — getData и смена DOM/UI. 5) Нет особого тега dropzone. 6) Если важно — путь кнопкой/клавиатурой.

📊 dragstart vs dragover vs drop

Topic dragstart dragover drop
Typical role Start drag; set dataTransfer Allow drop (preventDefault) Apply the result
Runs on Draggable source Potential target (often) Drop target
Must preventDefault? Usually no Yes — so drop can fire Yes — avoid default navigation quirks
Beginner payload setData("text/plain", id) — getData + move/label
This course depth Required Required Required (simple move/label)

Крошечное демо переноса в зону

Синяя коробка draggable; при drop попадает в зону. Без preventDefault на dragover drop часто не срабатывает.

Move a node into a drop zone

html 
<div id="item" draggable="true" style="padding:8px;background:#cdf;width:120px;">Drag me</div>
<div id="zone" style="margin-top:12px;padding:24px;border:2px dashed #666;">Drop here</div>
<script>
const item = document.getElementById("item");
const zone = document.getElementById("zone");
item.addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", "item");
});
zone.addEventListener("dragover", function (e) {
e.preventDefault();
});
zone.addEventListener("drop", function (e) {
e.preventDefault();
zone.appendChild(item);
});
</script>

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

  • draggable запускает жест
  • dragstart задаёт dataTransfer
  • dragover + preventDefault разрешает drop
  • drop меняет DOM
  • В отличие от Geolocation: нет координат устройства
  • Держите демо маленьким

Демо полезной нагрузки dataTransfer

Иногда не переносите тот же узел — несёте текст и показываете при drop, когда несколько источников делят одну цель.

Drop shows dataTransfer text

html 
<p id="a" draggable="true" style="display:inline-block;padding:6px;background:#fec;margin-right:8px;">Alpha</p>
<p id="b" draggable="true" style="display:inline-block;padding:6px;background:#cfe;margin-right:8px;">Beta</p>
<div id="tray" style="margin-top:12px;padding:16px;border:2px dashed #444;">Drop a label here</div>
<pre id="note"></pre>
<script>
const tray = document.getElementById("tray");
const note = document.getElementById("note");
function arm(id, label) {
document.getElementById(id).addEventListener("dragstart", function (e) {
e.dataTransfer.setData("text/plain", label);
});
}
arm("a", "Alpha");
arm("b", "Beta");
tray.addEventListener("dragover", function (e) {
e.preventDefault();
});
tray.addEventListener("drop", function (e) {
e.preventDefault();
note.textContent = "Dropped: " + e.dataTransfer.getData("text/plain");
});
</script>

Читаем идею dataTransfer

  • setData/getData переносят короткую строку
  • text/plain удобен новичкам
  • Несколько источников, одна цель
  • Не продукт загрузки файлов
  • Не Geolocation
  • Дальше: web workers

Когда использовать DnD

  • Карточка в ясную зону: хороший intro
  • Критичное действие без альтернативы: плохо
  • Тема: Web Storage
  • GPS: был Geolocation
  • Полный kanban: за пределами интро

Практика — тащите, бросайте, помечайте

  1. Проверьте демо переноса.
  2. Уберите preventDefault и увидьте сбой drop.
  3. Проверьте демо dataTransfer.
  4. Опционально: кнопка без перетаскивания.
  5. Предложение: Geolocation читает координаты; DnD переносит или помечает.
  6. Предпочитайте реальное окно браузера.
  7. Впереди: web workers.

Лёгкие ошибки

  • Забыть preventDefault на dragover
  • UI только DnD без альтернативы
  • Ждать тег dropzone
  • Путать с Geolocation
  • Злоупотреблять DnD вместо кнопки
  • Считать интро полным курсом sortable

Итог

  • DnD: draggable, dataTransfer и три события
  • preventDefault на dragover часто нужен
  • HTML отмечает источники; скрипт задаёт drop
  • Дайте путь без перетаскивания при необходимости
  • Geolocation были координаты; этот урок — перенос/метка указателем
  • Далее: web workers

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 65 из 68
Html Урок