ndd

ng-drag-drop-list

Demo

Showing:

Popularity

Downloads/wk

133

GitHub Stars

17

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Readme

NPM

Build Status

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

InputTypeDefault
dragDropListArray-
triggerHTMLElementnativeElement
durationnumber300
OutputEmit
dragDropListChangeArray

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial