Как реализовать функцию перетаскивания с помощью Angular 9

Как реализовать функцию перетаскивания с помощью Angular 9

От автора: Component Development Kit представляет собой набор инструментов, реализующих общие модели поведения и компоненты с очень уникальным стилем взаимодействия. Это своего рода абстракция библиотеки Angular Material Library без стилевой специфичности только для material design. Это предоставляет больше уникальных способов проявить творческий подход при создании компонентов Angular.

Инструмент Drag and Drop

Инструмент «Drag and Drop» является одним из наиболее распространенных способов разработки компонентов. Он содержит директивы, которые обеспечивают действительно высокое качество функции перетаскивания для компонентов.

Модуль @angular/cdk/drag-drop предоставляет вам возможность легко и декларативно создавать drag-and-drop интерфейсы с поддержкой свободного перетаскивания, сортировки в списке, переноса элементов между списками, анимации, сенсорных устройств, пользовательских рычагов перетаскивания, предварительного просмотра и заполнителей — в дополнение к горизонтальным спискам и блокировке по оси.

Что необходимо

Последняя версия Angular (используйте версию 9). Запускаем в терминале команду для проверки версии Angular.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Приложение Angular. Запускаем команду ниже для создания нового приложения.

Drag and Drop Module Angular Material установленный в вышеуказанном приложении.

После успешной установки angular cdk мы добавим «DragDropModule» в «app.module.ts», чтобы он был доступен для использования в приложении Angular следующим образом:

Создание списка для отображения данных

Функция перетаскивания работает в основном с элементами массива, давайте создадим список поп-фильмов, а затем добавим в него функционал перетаскивания. Откройте файл «app.component.ts» и добавьте массив фильмов, примерно так:

Затем добавьте некоторые стили в файл app.component.scss, например:

В файле «app.component.html» замените шаблон HTML-кода командой ngFor, чтобы отобразить список фильмов.

Теперь у нас есть список фильмов, стилизованных и отрисованных так, как их легко увидеть, когда мы перетаскиваем элементы списка.

Теперь, когда у нас есть список, мы рассмотрим Основную функцию перетаскивания и Перемещение объектов между списками в наборе компонентов разработки ниже.

Основная функция перетаскивания

Просто добавив директиву cdkDrag в средство визуализации элементов списка, мы сделаем элементы списка перетаскиваемыми.

Теперь, когда мы можем перетаскивать элементы списка, мы можем пойти дальше, реализовав функцию переупорядочения элементов или перемещения элементов списка вверх и вниз по списку. Это включает в себя прослушивание события cdkDropListDropped и указание метода moveItemsInArray.

Обновите файл app.component.html следующим образом:

Обновите файл app.component.ts следующим образом:

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Метод MoveItemsInArray принимает три параметра:

Массив списка, в котором он будет выполнять сортировку

«event.previousIndex», который является предыдущим индексом перетаскиваемого элемента для удаления.

«event.currentIndex», который является текущим индексом, куда перетаскивается элемент.

Посмотрите рабочую демо-версию.

Перемещение элементов между списками

Директива cdkDropList поддерживает перемещение перетаскиваемых элементов между двумя или более списками.

Вы можете соединить один или несколько экземпляров cdkDropList вместе, установив свойство cdkDropListConnectedTo или обернув элементы в элемент с атрибутом cdkDropListGroup.

Внесите приведенные ниже изменения в приложение Angular. Обновите файл app.component.html следующим образом:

Пояснение того, что мы сделали:

Мы добавили новый дроплист, где отображается новый список.

Мы обернули два div-списка дроплиста в div.

Мы указали данные дроплиста для каждого списка.

Мы создали идентификаторы в дроплистах, чтобы сообщить Angular, что это отдельные списки.

Обновите файл app.component.ts следующим образом:

Пояснение того, что мы сделали:

Мы создали новый массив и заполнили его данными.

Мы добавили оператор if else для изменения метода Array перетаскиваемого элемента.

Часть if содержит логику, когда элемент списка перетаскивается в отдельный выпадающий список.

Часть else содержит старую логику для базовых элементов списка перетаскивания в своем собственном списке.

Обновите файл app.component.Scss следующим образом:

Пояснение того, что мы сделали: мы добавили стиль перехода в процесс перетаскивания.

Посмотрите рабочую демо-версию.

Заключение

В этом посте мы познакомились с новым инструментом Angular 7 CDK, drag and drop, и рассмотрели практический пример того, как он может работать, и возможности, которые он предоставляет для предоставления отличного пользовательского опыта. Вы можете ознакомиться с документацией CDK здесь. Удачного кодирования!

Источник: https://www.thirdrocktechkno.com

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий