An Angular 2 Component for Drag and Drop Sortable List
npm i ng2-slipper -S
In your app.module.ts, include SlipperModule in your imports section.
import {SlipperModule} from 'ng2-slipper';
...
@NgModule({
imports: [
BrowserModule,
SlipperModule.forRoot(),
Routing
],
...
<ul slipper [slipperItems]="keywords" (itemDragged)="keywordDragged($event)" [moveImagePath]="'/assets/img/move-arrows.png'">
<li>
<p class="key">Keyword</p>
<p class="actions">Actions</p>
</li>
<li *ngFor="let keywordItem of (keywords | async)" slipperItem>
<div>
{{keywordItem.get('name')}}
</div>
</li>
</ul>
-
The
[slipperItems]
input property expects an observable of values being bound to your list items based on which the initialisation of the drag and drop event handlers is done. -
The
[moveImagePath]
optional property lets you specify a certain image which is shown when the item is being dragged. You can read more about it here.
- The
(itemDragged)
output property lets you listen to the event when an element from your list is dragged and dropped to a position in your list. The event handler provides two arguments as
keywordDragged(data) {
console.log(data.previousIndex);
console.log(data.finalIndex);
}
You need to specify an attribute of slipperItem
on your list items based on which the selection of the list items being "slipped" inside the slipper directive is done.