VueJS с начала этого года удерживает первое место среди самых популярных интерфейсных фреймворков. Официальный проект имеет 156 тыс. Запусков на github, его используют Alibaba, Wizzair, Gitlab, Netflix и другие.
Задача: сделаем перетаскиваемый список Todos на VueJS.
TL; DR
* Настройка VueJS
* создание списка Todos
* понимание событий перетаскивания
Часть VueJS
VueJS имеет отличный инструмент CLI (интерфейс командной строки), который можно использовать для создания шаблона проекта Vue.
npm install -g @vue/cli
Выполните следующую команду, чтобы создать платформу, которую вы проектируете, и выберите Typescript, Babel, linter et.
vue create todo-list
Теперь, имея шаблон проекта, давайте создадим наш компонент todo.
Список дел
Создайте компонент Todolist.vue внутри папки components. Внутри компонента нам нужно создать поле ‹input›, которое использует директиву v-model для привязки своего значения к свойству todoListItem. Метод addTodoItem () будет прослушивать событие нажатия клавиши Enter.
Все элементы будут храниться в массиве todosList.
Не забудьте включить компонент в компонент App.vue:
Запустите сервер разработки:
npm run serve
Введите http: // localhost: 8080, и страница должна появиться.
HTML Drag and Drop API
Этот API предоставляет нам функцию перетаскивания на HTML-страницу.
Нам нужно добавить специальный атрибут HTML draggable = ’true’, который позволяет перетаскивать теги HTML.
Чтобы перетащить задачи, необходимо прикрепить атрибут draggable к тегу ‹li›.
Теперь у пользователя есть возможность перетаскивать теги ‹li›. Чтобы отслеживать, куда мы перемещаемся и отбрасываем элементы нашего списка, нам нужно добавить слушателей событий.
Для нужд проекта мы будем использовать следующие события:
- dragstart - срабатывает, когда пользователь начинает перетаскивать элемент.
- dragover - элемент перетаскивается через допустимую цель перетаскивания каждые несколько сотен миллисекунд.
- drop - элемент падает на допустимую цель.
Итак, давайте прикрепим события:
Логика очень проста - когда Пользователь начинает перетаскивать элемент, мы сохраняем идентификатор перетаскиваемого элемента ‹li›. Когда пользователь кладет свой элемент где-нибудь над другими элементами списка, мы поменяем местами элементы массива задач, используя идентификаторы ‹li›.
Вот метод swap - мы используем метод splice, иначе vue не заберет изменение.
Остальное - обновление DOM будет автоматически выполняться VueJs.
Ознакомьтесь со всеми событиями и дополнительной информацией здесь.
Нажмите здесь, чтобы увидеть поддержку браузеров и известные проблемы.
Помните, что индекс НЕ использовать в качестве : ключа и идентификатора. Когда элементы меняются местами, индексы также меняются местами, что приведет к будущим проблемам.
Репозиторий Github: https://github.com/kasadawa/drag-and-drop-todos-list-with-VueJS
Если понравилась тема, дайте 🖖