ng2-dnd-docs.md

Drag-and-Drop (ng2-dnd)

Draggable

Directive: dnd-draggable

Inputs:

• dragEnabled: boolean
• dragData: any - The data that has to be dragged. It can be any JS object.
• dropZones: Array<string> - List of allowed zones for drop.
• effectAllowed: string - Drag allowed effect
• effectCursor: string - Drag effect cursor
• dragImage: string | DragImage | Function - Drag image

Outputs:

• onDragStart: EventEmitter<DragDropData>
• onDragStop: EventEmitter<DragDropData>
• onDragSuccess: EventEmitter<any> - Callback function called when the drag action ends with a valid drop action. It is activated after the onDropSuccess callback.

CSS classes:

• .dnd-drag-start

Droppable

Directive: dnd-droppable

Inputs:

• dropEnabled: boolean
• allowDrop: (dropData: any) => boolean - Check dropData function.
• dropZones: Array<string> - List of allowed zones.
• effectAllowed: string - Drag allowed effect
• effectCursor: string - Drag effect cursor

Outputs:

• onDragEnter: EventEmitter<DragDropData>
• onDragOver: EventEmitter<DragDropData>
• onDragLeave: EventEmitter<DragDropData>
• onDropSuccess: EventEmitter<DragDropData> - Callback function called when the drop action completes correctly. It is activated before the onDragSuccess callback.

CSS classes:

• .dnd-drag-over
• .dnd-drag-enter