node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

ng-drag-drop-list

ng-drag-drop-list

NPM

Demo

Installation

npm install --save 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 an array in your component (of colors for example)

import { Component } from '@angular/core';
 
@Component({
...
templateUrl'./app.component.html',
})
export class AppComponent {
  public arr:string[] = ["blue","red","greenyellow","purple","grey"];
}

use the directive in your html templates:

  <template ngFor [ngForOf]="arr" let-item let-index="index">
    <div [dragDropList]="[index, array]" [style.background]="item" tabindex="0">{{item}}({{index }})</div>
  </template>
 

Inputs

requireds

    [dragDropList]="[index, array]"
  • index and array from *ngFor (item of array; let index="index")

optionals

adding classes for dragged & drag-overed:

[dragged] and: [drag-overed] for example:

    .my-dragged-class{
        opacity: .5;
    }
    .my-dragged-over-class{
        border: 1px solid black;
    }
    <div [dragDropList]="[index, array]" dragged="my-dragged-class" drag-overed="my-dragged-over-class">{{index}}</div>