Skip to content

Instantly share code, notes, and snippets.

@ovcharik

ovcharik/ng2-dnd-docs.md

Created March 30, 2018 12:55
Show Gist options
  • Save ovcharik/5cc272fd8af199528548fbb882073542 to your computer and use it in GitHub Desktop.
Save ovcharik/5cc272fd8af199528548fbb882073542 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment