Demo
ng-drag-drop-list
Ng Drag Drop List is an Angular library for drag and drop elements on list.
Installation
Install with npm
npm install ng-drag-drop-list
Install with yarn
yarn add ng-drag-drop-list
Usage
Add DragDropListModule
to your list of module imports:
import { DragDropListModule } from 'ng-drag-drop-list';
@NgModule({
imports: [
...
DragDropListModule
],
...
})
export class AppModule { }
Create a list in your component (of colors for example)
import { Component } from '@angular/core';
@Component({
...
})
export class AppComponent {
colors = ['blue', 'red', 'greenyellow', 'purple', 'grey'];
}
Use dragDropList
directive on the drag elements (TWO-WAY binding):
<div *ngFor="let color of colors"
[(dragDropList)]="colors">
{{color}}
</div>
For specific dragging trigger:
<div *ngFor="let color of colors"
[(dragDropList)]="colors"
[trigger]="trigger">
<button #trigger> TRIGER </button>
{{color}}
</div>
Api
Input | Type | Default |
---|
dragDropList | Array | - |
trigger | HTMLElement | nativeElement |
duration | number | 300 |
Output | Emit |
---|
dragDropListChange | Array |