Этот блог предоставит вам информацию об использовании Angular-sortablejs.
Обычно, когда вам нужно поддерживать списки, например, для списка Todo или любых других приложений, и вам нужно перетаскивать элементы из одного списка в другой, вы можете использовать хорошо известный плагин angular-sortablejs.
Чтобы использовать этот плагин в своем проекте, сначала вам необходимо его установить. Для этого перейдите в папку своего проекта и выполните
npm install --save sortablejs && npm install --save angular-sortablejs
Это можно использовать для Angular ›= 4.x. После этого вам нужно импортировать в корневой модуль (app.module.ts).
imports: [ // ... SortablejsModule.forRoot({ animation: 150 }), // ... ]
Затем в вашем компонентном модуле (скажем, sort.module.ts)
imports: [ // ... SortablejsModule, // ... ]
Учитывая, что у нас есть два списка, из которых нужно отсортировать элементы, определим его следующим образом.
Так, например, list1 содержит список задач.
list1=["planning","designing","developing","testing"]
И список2 пуст.
list2=[]
Теперь, если вам нужно отобразить по порядку, вы можете использовать тег списка на своей html-странице. Примечание: я использую Angular Material 6 для разработки пользовательского интерфейса.
Итак, двое из списка будут такими:
<mat-list class="matList1"> <mat-list-item *ngFor="let task1 of list1"> {{task1}} </mat-list-item> </mat-list> <mat-list class="matList2"> <mat-list-item *ngFor="let task2 of list2"> {{task2}} </mat-list-item> </mat-list>
Приведенный выше код предоставит вам два списка: список 1 содержит содержимое в списке, а список 2 пуст. Теперь, рассматривая методы sortablejs, нам нужно установить некоторые свойства для списка, позволяя списку действовать как сортируемый контейнер. Продолжая дальше, мы даже можем заставить элемент перетащить из одного списка в другой.
Итак, давайте определим варианты для обоих списков.
optionsForList1: SortablejsOptions = { group: { name: 'list1', put: false, }, sort: true, scroll: true, onStart: function (event) { // executes when the element drag starts. }, onEnd: function (event) { // executes when the event ends. }, onRemove: (evt) => { // executes when the element is been removed }, scrollSensitivity: 100 }; optionsForList2: SortablejsOptions = { group: { name: 'list2', put: false, }, sort: false, scroll: true, scrollSensitivity: 100 };
Теперь рассмотрим тот же код для изменений HTML:
<mat-list class="matList1"> <mat-list-item *ngFor="let task1 of list1" [sortablejs]="task1" [sortablejsOptions]="optionsForList1" [runInsideAngular]="true"> {{task1}} </mat-list-item> </mat-list> <mat-list class="matList2"> <mat-list-item *ngFor="let task2 of list2" [sortablejs]="task2" [sortablejsOptions]="optionsForList2" [runInsideAngular]="true"> {{task2}} </mat-list-item> </mat-list>
Обратите внимание, что я упомянул свойство под названием «runInsideAngular». Это свойство отвечает за некоторую магию, которая позволяет сортируемым функциям работать в среде Angular. Поэтому установите для этого свойства значение «true», чтобы сортировка работала должным образом.
Это все!! Вы можете открыть свое приложение и попробовать перетащить его из списка1 и списка2.
Попробуйте это и поделитесь со мной своим мнением. Спасибо.