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