Drag-and-drop на фронтенде — делаем канбан-доску или аналог Trello

YOUTUBE · 16.11.2025 05:11

Ключевые темы и таймкоды

Реализация перетаскивания элементов на фронтенде

0:00

Видео рассказывает о реализации перетаскивания элементов на фронтенде с использованием ванильного JavaScript.
Автор объясняет, как реализовать такую функциональность на платформе LMS, используя чистый JavaScript без фреймворков.

Разметка и стили

3:19

В разметке используются классы для колонок, заголовков и контента.
Стиль элементов включает использование box-sizing, border-radius, и user-select для предотвращения выделения текста при перетаскивании.

Реализация перетаскивания

7:39

При перетаскивании элементов добавляется пустой элемент с заданными размерами и отступами.
В реализации используется класс для добавления холдера для колонки, который добавляется от плейс-холдера для колонки.

Реализация перетаскивания элементов

9:12

В видео рассказывается о реализации перетаскивания элементов на веб-странице с использованием JavaScript.
Автор объясняет, как использовать события "on-mouse-down" и "on-mouse-move" для перемещения элементов.
Он также объясняет, как использовать функцию "get-element-from-point" для определения элемента, над которым находится текущий элемент.

Логика перетаскивания

15:36

Автор объясняет, как использовать функцию "get-element-from-point" для определения элемента, над которым находится текущий элемент.
Он также объясняет, как использовать функцию "get-element-by-class" для определения элемента с классом "board-atom".
В конце автор объясняет, как использовать функцию "set-element-from-point" для позиционирования элемента на странице.

Реализация перетаскивания элементов

20:29

Автор объясняет, как реализовать перетаскивание элементов в веб-приложении, используя JavaScript и ванильные функции.
Он показывает, как позиционировать элементы и добавлять холдеры для перетаскивания.

Обработка событий и позиционирование элементов

24:26

Автор объясняет, как обрабатывать события и позиционировать элементы после перетаскивания.
Он также показывает, как добавлять и удалять холдеры и как обрабатывать пустые колонки для перетаскивания элементов.

Перенос секций и реализация на других фреймворках

27:16

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