node package manager


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.


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.


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

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



asbDraggable enables HTML dragging on a given component.


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 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.


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