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