Я начал работать с Vue еще в июне 2017 года. В то время я возился с концепцией, которая много касалась перетаскивания компонентов Vue. Прежде чем я придумал идею с использованием некоторой библиотеки Vue, я хотел создать макет идеи с использованием ванильного JavaScript. Получилось вот это прямо здесь:
Идея началась довольно просто. Я использовал стандартный API-интерфейс javascript для перетаскивания, чтобы создавать статические контейнеры для перетаскивания, которые будут получать сбрасываемые элементы. Ничего сумасшедшего. Когда я начал смоделировать идею с моими потрясающими навыками рисования (предупреждение о сарказме), вот что я придумал:
Итак, идея здесь в том, что есть три основных контейнера, куда отправляются маршрутизаторы (путешественники).
- Они будут запускаться в контейнере Not In Production при создании маршрутизатора.
- Пользователь сможет создавать динамические контейнеры отделов на вкладке «Отделы» и сможет сортировать их в том порядке, в котором они должны отображаться.
- Пользователь сможет перетащить маршрутизатор в третий контейнер, чтобы отправить его на инвентаризацию или в какой-либо другой процесс следующего шага.
Другой контейнер в крайнем правом углу рисунка — это то, как будут выглядеть контейнеры маршрутизатора, когда они расширятся в контейнер отдела; отображение дополнительной информации о маршрутизаторе.
Используя библиотеку под названием Vue.Draggable, я смог воплотить эту идею в жизнь. Vue.Draggable — это плагин SortableJs для Vuejs. Очень прост в освоении и использовании. Я приведу ниже пример кода для вас.
Итак, с помощью этой библиотеки я смог построить это прямо здесь:
По сути, каждый из контейнеров отдела, а также два основных контейнера по бокам являются экземпляром компонента Draggables. Компонент Vue в целом использует Vuex для управления состоянием приложения, поскольку для его работы требуется много сложного (а иногда и хакерского) кода. При каждом сбросе я фиксирую идентификатор контейнера, индекс сброса, предыдущий индекс компонента маршрутизатора и идентификатор основного контейнера. Затем, используя индекс удаления, компонент делает запрос PATCH к API, чтобы отсортировать все маршрутизаторы и обновить их ключи сортировки.
Это один из моих любимых проектов, над которым я работал, и я с нетерпением жду возможности улучшить концепцию в будущем. Спасибо, что оценили мое достижение. Вот ссылка на код этого компонента. Надеюсь, это вдохновит вас. :)
