Этот блог предоставит вам информацию об использовании 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.

Попробуйте это и поделитесь со мной своим мнением. Спасибо.