ngx-hm-sortable GitHub

Upgrade to Angular 6+ and Rxjs6+

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

Demo

Install

1. install

npm install ngx-hm-sortable

Example

1. Module

import { NgxHmSortableModule } from 'ngx-hm-sortable';

@NgModule({
  declarations: [ ...something... ],
  imports: [ ...something... , NgxHmSortableModule],
  providers: [ ...something... ],
  bootstrap: [ ...something... ]
})
export class YourModule {
  ...something...
}

2. TS

import { Component } from '@angular/core';

@Component({
  ... something ...
})
export class YourComponent {
  list = [1, 2, 3, 4, 5];
}

3. HTML

<table>
  <tbody
    [ngx-hm-sortable]="list"
    elms-selector=".item"
    move-selector=".drag"
    selected-class="color-blue"
    moving-class="color-red"
    (sort-complete)="complete($event)">
    <tr>
      <th>sortable</th>
      <th>number</th>
    </tr>
    <tr *ngFor="let item of list; let i = index;" [attr.index]="i" class="item">
      <td>
        <span class="drag">dragMe!</span>
      </td>
      <td>{{item}}</td>
    </tr>
  </tbody>
</table>

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 |