ng2sortable v1.1.3

ng2sortable

Demo

Install as npm package

npm install ng2sortable

Add module to imports definition

import { Component, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NG2SortableModule } from 'ng2sortable';

@Component({
  selector: 'my-app'
  temlate: 'Hello World !!!'
})
export class App {}

@NgModule({
  imports: [ BrowserModule, NG2SortableModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Add some settings to our systemjs config

System.config({
  map: {
    ng2sortable: '/node_modules/ng2sortable'
  },
  packages: {
    ng2sortable: {
      main: './index.js',
      defaultExtension: 'js'
    }
  }
});

Enjoy

Example using:

<ul [sortable]='{ data: yourDataListObject }'>
  <li *ngFor='let data of yourDataListObject' [data]='d'>
    {{d}}
  </li>
</ul>

Api

There are only 2 components you can use:

• SortableComponent ( selector: 'sortable' )
• SortableItemComponent ( selector: 'sortable-item' )

SortableComponent should receive object with settings:

data (object) - Here you pass object with data you will use. Example:

var myDataObject = [
  'Minsk',
  'Moscow',
  'Warsaw'
]

<div [sortable]='{ data: myDataObject }'>
...
</div>

shared (boolean) - If this parameter is true this SortableComponent can take items from other SortableComponent. Default value is false. Example:

<div [sortable]='{ shared: true  }'>
...
</div>

afterStartDrag (function) - Will called after item start drag.
Function take 2 parameters:

• item - SortableItemComponent that was dragged
• sortable - SortableComponent in which item was before start dragging

afterDrop (function) - Will called after item drop Function take 2 parameters:

• item - SortableItemComponent that was dropped
• sortable - SortableComponent in which item was dropped

afterNewItemAdded (function) - Will call if item dropped in SortableComponent was in another SortableComponent. Function take 3 parameters:

• item - SortableItemComponent that was dropped
• newSortable - SortableComponent in which item was dropped
• oldSortable - SortableComponent in which item was dropped