Как сделать перетаскиваемые окна для составления пар слов на сайте

Перетаскиваемые окна (drag-and-drop) - популярный интерактивный элемент, который часто используется в образовательных и игровых приложениях. Например, на сайте de-online.ru в задании «Составить пары слов» пользователь перетаскивает слова из одного блока в другой, чтобы сопоставить их. В этой статье мы разберём, как реализовать такой интерфейс с помощью HTML, CSS и JavaScript.

Основы механизма drag-and-drop

Для создания перетаскиваемых окон используется стандартный API Drag and Drop в браузере. Он включает события dragstart, dragover, drop и dragend. Каждый элемент, который можно перетаскивать, должен иметь атрибут draggable="true". Целевые контейнеры, куда можно бросить элемент, обрабатывают события dragover и drop.

Пошаговая инструкция: создание пар слов

1. Разметка HTML

Создайте два контейнера: один для исходных слов, другой для целевых ячеек. Каждое слово оборачивается в отдельный блок с классом draggable. Пример:

<div id="source">
  <div class="draggable" draggable="true">Кошка</div>
  <div class="draggable" draggable="true">Собака</div>
</div>
<div id="target">
  <div class="dropzone">Перетащите сюда слово</div>
  <div class="dropzone">Перетащите сюда слово</div>
</div>

2. Стилизация CSS

Оформите блоки так, чтобы они были визуально привлекательными. Используйте border, padding и background-color. Для перетаскиваемых элементов задайте cursor: grab. При перетаскивании можно добавить класс .dragging с полупрозрачностью.

3. JavaScript-логика

Напишите обработчики событий. Когда элемент начинают перетаскивать (dragstart), сохраните его ID или данные в dataTransfer. В dragover отмените стандартное поведение (вызовите e.preventDefault()), чтобы разрешить сброс. В drop вставьте элемент в целевой контейнер. Пример кода:

const draggables = document.querySelectorAll('.draggable');
const dropzones = document.querySelectorAll('.dropzone');

draggables.forEach(item => {
  item.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', item.id);
  });
});

dropzones.forEach(zone => {
  zone.addEventListener('dragover', (e) => e.preventDefault());
  zone.addEventListener('drop', (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(data);
    zone.appendChild(draggedElement);
  });
});

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

Чтобы задание было полезным, нужно проверять, правильно ли пользователь сопоставил слова. Для этого можно добавить атрибут data-pair каждому элементу, а в целевых зонах хранить ожидаемое значение. После сброса сравнивайте данные и подсвечивайте результат зелёным (верно) или красным (неверно).

Распространённые ошибки и их решение

• Элемент не перетаскивается: убедитесь, что атрибут draggable="true" задан и нет ошибок в консоли браузера.
• Сброс не работает: проверьте, что в dragover вызван e.preventDefault().
• Потеря данных при перетаскивании: используйте dataTransfer для хранения ID или текста.

Заключение

Создание перетаскиваемых окон для составления пар слов - несложная задача, если освоить базовые события drag-and-drop. Вы можете адаптировать этот код под свои нужды, добавив анимацию, звуки или проверку результатов. Такой интерактив значительно повышает вовлечённость пользователей на сайте.