Логотип Vue Fluid DnD
У веб-додатках, які використовують фреймворки Single-Page Application такі як Vue, React, Angular тощо, дуже часто виникає необхідність організовувати списки або інші колекції елементів шляхом їх сортування, додавання, видалення або переміщення елементів всередині.
Екосистема Vue не така багата, як у React, і хоча для Vue існують непогані рішення для drag-and-drop, більшість з них є обгортками для інших бібліотек (як, наприклад, Vue draggable, що базується на Sortablejs), мають недостатнє обслуговування або не підтримують Vue 3.
З бібліотекою drag and drop: Vue Fluid DnD, ми пропонуємо нове рішення, натхненне зручністю використання drag and drop від formkit, анімаціями з react-beautiful-dnd та іншими.
Vue Fluid DnD в дії
- Спочатку встановіть vue-fluid-dnd у поточний проект:
npm i vue-fluid-dnd
- Імпортуйте бібліотеку та використовуйте її простий API, щоб передати список чисел, що потребують сортування, як параметр:
- Змінна parent містить посилання на контейнер елементів, які потрібно відсортувати, яке передається за посиланням до елемента ul, і для кожного елемента також передається його позиція в списку (index).
Не забувайте передати атрибут key, що має унікальне значення для кожного елемента.
- Додайте деякі стилі до списку:
.number {
border-style: solid;
padding-left: 5px;
margin-top: 0.25rem;
border-width: 2px;
border-color: black;
}
.number-list {
display: block;
padding-inline: 25px;
}
- Ось так це виглядає:
приклад списку номерів
- Завдяки Vue Fluid DnD ви можете перетягувати елементи та сортувати список.
приклад списку номерів з перетягнутим елементом
Що ще можна перетягувати та сортувати?
І це все.
Маючи це як основу, ви повинні бути здатні перетягувати та сортувати прості списки елементів у додатках на Vue 3.
Але чому б не зупинятись на досягнутому?
Існують й інші можливості бібліотеки Vue Fluid DnD, які не були обговорені в цій статті:
- Списки зі скролом
- Горизонтальні списки
- Списки з обробниками
- Визначення, чи можна перетягувати елемент
- Перетягування між списками
- Списки з інпутами
- Користувацькі стилі перетягування
- Користувацькі стилі для елементів, на які можна перетягнути
- Сортування рядків таблиць
- Видалення елементів зі списків
Переваги використання Vue Fluid DnD
Легковажний: Vue Fluid DnD не має залежностей, що робить його досить легким, надійним і більш стійким, оскільки він не несе помилок від зовнішніх залежностей.
Простий: API бібліотеки Vue Fluid DnD просте та досить легке у використанні.
Він також є гнучким для майбутніх функціональностей та змін, які планується додати в майбутньому.
Привабливий: Vue Fluid DnD був розроблений для покращення функціональності перетягування з елегантними анімаціями при зміні розташування елементів на сторінці. Обіцяються додаткові можливості для налаштування в цій області в майбутньому.
Висновки
Ця стаття представляє Vue Fluid DnD як альтернативу інструментам перетягування в екосистемі Vue 3. Наведено приклад його використання та коротко обговорено переваги цього інструменту.
Якщо вам цікаво підтримати розвиток цього проєкту, ви можете залишити зірку на репозиторії або, що ще краще, спробувати Vue Fluid DnD і надіслати відгук через issue, pull request, або написавши на мою особисту пошту.
Перекладено з: Enhance the drag and drop of your Vue 3 application