ngx-hm-sortable GitHub

Upgrade to Angular 6+ and Rxjs6+

Angular sortable with hammerjs, support SSR(server side rendering).

Demo


Install

1. install

``bash
npm install ngx-hm-sortable
`

Example

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

| 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 |