node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

asb-dnd

Drag and drop directives for Angular

This Angular module consists of two Angular directives that allow yo to drag elements and drop them into any droppable element.

Draggables can hold any JSON-serializablea payload that will be delivered to the droppable.

Installation

Drag and Drop library can be installed via npm

npm install asb-dnd --save

Sample code

Please see to this plunker for a full working example.

Usage

To use these directives you have to import AsbDragAndDropModule in your app module.

import { NgModule } from '@angular/core';
/* ... */
import { AsbDragAndDropModule } from 'asb-dnd';
 
@NgModule({
  imports     : [AsbDragAndDropModule /*, ... */],
  /* ... */
})
export class MyApplicationModule {
}
 

Directives

asbDraggable

asbDraggable enables HTML dragging on a given component.

Attributes

Attribute Type Default Description
asbDraggable @Input() false Converts the component into an HTML draggable
asbDraggableData @Input() null This will be the payload associated to the drag event.
asbDraggableType @Attribute() draggable Type of the draggable

asbDroppable

asbDroppable enables dropping of draggables on a given component. This directive accetps a comma-separated list of asbDraggableTypes.

If the draggable type is accepted by this droppable, class dragover is added to the component. In other case, then classes will be dragover and forbidden added.

Attributes

Attribute Type Default Description
onDrop @Output() Event to emit when a drop has occured
asbDroppable @Attribute() draggable Comma-separated list of asbDraggableTypes