Upgrade to Angular 6+ and Rxjs6+
npm install ngx-hm-sortableUpgrade to Angular 6+ and Rxjs6+
Angular sortable with hammerjs, support SSR(server side rendering).
1. install
``bash`
npm install ngx-hm-sortable
1. Module
`ts
import { NgxHmSortableModule } from 'ngx-hm-sortable';
@NgModule({
declarations: [ ...something... ],
imports: [ ...something... , NgxHmSortableModule],
providers: [ ...something... ],
bootstrap: [ ...something... ]
})
export class YourModule {
...something...
}
`
2. TS
`typescript
import { Component } from '@angular/core';
@Component({
... something ...
})
export class YourComponent {
list = [1, 2, 3, 4, 5];
}
`
3. HTML
`html``
[ngx-hm-sortable]="list"
elms-selector=".item"
move-selector=".drag"
selected-class="color-blue"
moving-class="color-red"
(sort-complete)="complete($event)">
sortable
number
dragMe!
{{item}}
| Attribute | necessary(default) | type | position | description |
| --------- | --------- | ---- | -------- | ----------- |
| [ngx-hm-sortable] | yes | Array | container | add sortable by item array. |
| [elms-selector] | yes | String | container | the sortable items selector |
| [move-selector] | no (elms-selector) | String | container | the move Anchor |
| [sortable-id] | no / (random) | String | container | the container unique id |
| [sortable-enable] | no / (true) | Boolean | container | sortable enable state, default |
| [moving-class] | no | string | container | add class with selected new element |
| [selected-class] | no | string | container | add class with selected origin element. |
| (sort-complete) | no | (Array)=>void | container | when sortable complete, emit this new array |
| [attr.index] | yes | Number(Integer) | item | the index of array |