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

Если понравилась тема, дайте 🖖