Создание перетаскиваемых элементов
Включайте перетаскивание и обрабатывайте события перетаскивания.
«Создание перетаскиваемых элементов» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
API перетаскивания HTML
Нативный API перетаскивания позволяет пользователям захватывать элементы и перемещать их в другое место. API работает на основе событий: исходные элементы порождают события перетаскивания, а целевые элементы — собственные события. Библиотека не требуется.
Атрибут перетаскивания
По умолчанию перетаскивать можно только ссылки и изображения. Добавьте draggable="true", чтобы сделать перетаскиваемым любой элемент.
<div draggable="true" id="card">Drag me</div>Настройка перетаскивания в JS
Поведение можно переключать из скрипта через свойство draggable.
const card = document.getElementById("card");
card.draggable = true;Событие начала перетаскивания
dragstart срабатывает в момент начала перетаскивания. Здесь следует зафиксировать, что именно перетаскивается.
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});Перенос данных с помощью dataTransfer
Событие предоставляет объект dataTransfer. Используйте setData(format, value) в обработчике dragstart, чтобы прикрепить данные, которые будут передаваться вместе с перетаскиванием.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});Событие перетаскивания
drag срабатывает непрерывно, пока элемент перемещается. Используйте его экономно: событие может срабатывать много раз в секунду.
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});Событие завершения перетаскивания
dragend срабатывает, когда пользователь отпускает элемент, независимо от успешности перемещения. Используйте его для сброса стилей исходного элемента.
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});Обозначение исходного элемента
Распространённый подход: добавлять класс при dragstart и удалять его при dragend, чтобы затемнить или выделить перетаскиваемый элемент.
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));Разрешённые действия
Установите effectAllowed в dragstart, чтобы объявить допустимые операции: "copy", "move", "link" или их сочетания.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});Ограничение для сенсорных устройств
Нативный API имеет ограниченную поддержку сенсорных устройств на мобильных платформах. Для приложений, ориентированных прежде всего на сенсорное управление, рассмотрите события указателя или специализированную библиотеку; нативный API особенно хорошо подходит для компьютеров.
Отключение выделения текста
При перетаскивании можно случайно выделить текст. Небольшое правило CSS предотвращает это и делает перетаскивание аккуратнее.
/* CSS */
.draggable { user-select: none; }Быстрая проверка
Проверьте основы перетаскивания.
Повторение: создание перетаскиваемых элементов
Вы включили перетаскивание с помощью draggable="true", обработали dragstart/drag/dragend, прикрепили данные через dataTransfer.setData, задали effectAllowed и стилизовали исходный элемент. Далее: целевые элементы для сброса.
Часто задаваемые вопросы
Урок «Создание перетаскиваемых элементов» бесплатный?
Да — полный текст урока «Создание перетаскиваемых элементов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Создание перетаскиваемых элементов»?
Включайте перетаскивание и обрабатывайте события перетаскивания. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Создание перетаскиваемых элементов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Создание перетаскиваемых элементов
- Цели для сброса и dataTransfer
- Визуальная обратная связь при перетаскивании
- Перетаскивание файлов на страницу