Перейти к содержимому

Список с функцией Drag and Drop в SvelteKit с использованием svelte-dnd-action

Cooper Codes

0:00 / 0:00

Список с функцией Drag and Drop в SvelteKit с использованием svelte-dnd-action

8 538 просмотров · 3 года назад
Cooper Codes
13,7 тыс. подписчиков
8 538 просмотров · 3 года назад
🎓 Присоединяйтесь к моей обучающей платформе для модульных курсов, учебных упражнений и многого другого: https://coderprep.com/ В этом видео мы рассмотрим основы создания функции перетаскивания в SvelteKit с помощью svelte-dnd-action. Это приложение использует как SvelteKit, так и TypeScript, что позволяет создавать полностью типизированные компоненты, допускающие перетаскивание. Приложение также использует объекты для данных, что означает, что вы можете хранить любое необходимое количество данных в своих компонентах (все, что помещается в объект). Если вы хотите добавить функцию перетаскивания в свое приложение SvelteKit, это видео для вас! Помимо создания списка с функцией перетаскивания, я также рассказываю обо всех функциях, лежащих в основе того, что я делаю. Это позволит вам использовать этот урок для создания любого интерфейса перетаскивания, который вам нравится. Мы также используем Skeleton UI для компонентов пользовательского интерфейса, что позволяет нам быстро создавать красивые пользовательские интерфейсы! Код финального проекта: https://github.com/coopercodes/Svelte... 0:00 Вступление / Демонстрация проекта 0:30 Настройка скелетного интерфейса 2:08 Создание контейнера для перетаскивания 3:40 Создание компонентов карточек для элементов списка 6:55 Ввод событий D&D и элементов списка 9:33 Логика перетаскивания элементов (рассмотреть, доработать) 11:25 Добавление анимаций к списку 13:21 Создание расширенных элементов списка 16:14 Заключительное обсуждение, спасибо за просмотр!