Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
ngx-drag-drop
Advanced tools
ngx-drag-drop - npm Package Compare versions
Comparing version 1.0.0-beta.0 to 1.0.0-beta.1
@@ -1,4 +0,4 @@ | ||
| import { ElementRef, EventEmitter, OnChanges, Renderer2, SimpleChanges } from "@angular/core"; | ||
| import { ElementRef, EventEmitter, OnChanges, OnInit, Renderer2, SimpleChanges } from "@angular/core"; | ||
| import { EffectAllowed } from "./dnd-types"; | ||
| export declare class DndDraggableDirective implements OnChanges { | ||
| export declare class DndDraggableDirective implements OnInit, OnChanges { | ||
| private elementRef; | ||
@@ -20,3 +20,6 @@ private renderer; | ||
| private readonly dndHandle?; | ||
| private readonly dndDragImageRef?; | ||
| private dragImage; | ||
| constructor(elementRef: ElementRef, renderer: Renderer2); | ||
| ngOnInit(): void; | ||
| ngOnChanges(changes: SimpleChanges): void; | ||
@@ -23,0 +26,0 @@ private onDragStart(event); |
@@ -1,1 +0,1 @@ | ||
| [{"__symbolic":"module","version":3,"metadata":{"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnChanges":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnChanges":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}}}}] | ||
| [{"__symbolic":"module","version":3,"metadata":{"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"}]}]}],"dndDragImageRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"DndDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDraggable]"}]}],"members":{"dndDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDraggingSourceClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndMoved":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCopied":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndLinked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndCanceled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["attr.draggable"]}]}],"dndHandle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"}]}]}],"dndDragImageRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragstart",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragend",["$event"]]}]}]}}}}] |
@@ -6,2 +6,3 @@ import { ElementRef, EventEmitter, OnInit, Renderer2 } from "@angular/core"; | ||
| dropEffect: DropEffect; | ||
| isExternal: boolean; | ||
| data?: any; | ||
@@ -18,6 +19,7 @@ index?: number; | ||
| dndHorizontal: boolean; | ||
| dndPlaceholder: Element | null; | ||
| dndDragoverClass: string; | ||
| readonly dndDragover: EventEmitter<DragEvent>; | ||
| readonly dndDrop: EventEmitter<DndDropEvent>; | ||
| private readonly dndPlaceholder?; | ||
| private placeholder; | ||
| constructor(elementRef: ElementRef, renderer: Renderer2); | ||
@@ -24,0 +26,0 @@ ngOnInit(): void; |
@@ -1,1 +0,1 @@ | ||
| [{"__symbolic":"module","version":3,"metadata":{"DndDropEvent":{"__symbolic":"interface"},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragenter",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"DndDropEvent":{"__symbolic":"interface"},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragenter",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}]}}}}] | ||
| [{"__symbolic":"module","version":3,"metadata":{"DndDropEvent":{"__symbolic":"interface"},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragenter",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"DndDropEvent":{"__symbolic":"interface"},"DndDropzoneDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[dndDropzone]"}]}],"members":{"dndDropzone":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndEffectAllowed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDisableIf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndAllowExternal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndHorizontal":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragoverClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dndDragover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dndPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"isDropAllowed":[{"__symbolic":"method"}],"checkAndUpdatePlaceholderPosition":[{"__symbolic":"method"}],"getPlaceholderIndex":[{"__symbolic":"method"}],"cleanupDragoverState":[{"__symbolic":"method"}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragenter",["$event"]]}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["drop",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["dragleave",["$event"]]}]}]}}}}] |
@@ -13,2 +13,3 @@ import { DropEffect, EffectAllowed } from "./dnd-types"; | ||
| export declare function getDndType(event: DragEvent): string | undefined; | ||
| export declare function isExternalDrag(): boolean; | ||
| export declare const dndState: Readonly<DndState>; |
@@ -1,1 +0,1 @@ | ||
| [{"__symbolic":"module","version":3,"metadata":{"DndState":{"__symbolic":"interface"},"startDrag":{"__symbolic":"function"},"endDrag":{"__symbolic":"function"},"setDropEffect":{"__symbolic":"function"},"getDropEffect":{"__symbolic":"function"},"getDndType":{"__symbolic":"function"},"dndState":{"__symbolic":"error","message":"Expression form not supported","line":111,"character":43}}},{"__symbolic":"module","version":1,"metadata":{"DndState":{"__symbolic":"interface"},"startDrag":{"__symbolic":"function"},"endDrag":{"__symbolic":"function"},"setDropEffect":{"__symbolic":"function"},"getDropEffect":{"__symbolic":"function"},"getDndType":{"__symbolic":"function"},"dndState":{"__symbolic":"error","message":"Expression form not supported","line":111,"character":43}}}] | ||
| [{"__symbolic":"module","version":3,"metadata":{"DndState":{"__symbolic":"interface"},"startDrag":{"__symbolic":"function"},"endDrag":{"__symbolic":"function"},"setDropEffect":{"__symbolic":"function"},"getDropEffect":{"__symbolic":"function"},"getDndType":{"__symbolic":"function"},"isExternalDrag":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"isDragging":false,"dropEffect":"none","effectAllowed":"all","type":{"__symbolic":"reference","name":"undefined"}},"member":"isDragging"},"right":false}},"dndState":{"__symbolic":"error","message":"Expression form not supported","line":116,"character":43}}},{"__symbolic":"module","version":1,"metadata":{"DndState":{"__symbolic":"interface"},"startDrag":{"__symbolic":"function"},"endDrag":{"__symbolic":"function"},"setDropEffect":{"__symbolic":"function"},"getDropEffect":{"__symbolic":"function"},"getDndType":{"__symbolic":"function"},"isExternalDrag":{"__symbolic":"function","parameters":[],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"isDragging":false,"dropEffect":"none","effectAllowed":"all","type":{"__symbolic":"reference","name":"undefined"}},"member":"isDragging"},"right":false}},"dndState":{"__symbolic":"error","message":"Expression form not supported","line":116,"character":43}}}] |
@@ -8,3 +8,3 @@ import { DropEffect, EffectAllowed } from "./dnd-types"; | ||
| _dndHandle?: HTMLElement; | ||
| _dndDragLeaveHandled?: true; | ||
| _dndDropzoneActive?: true; | ||
| } | ||
@@ -17,5 +17,6 @@ export declare const DROP_EFFECTS: DropEffect[]; | ||
| export declare function setDragData(event: DragEvent, data: DragDropData, effectAllowed: EffectAllowed): void; | ||
| export declare function getDropData(event: DragEvent, dragIsInternal: boolean): DragDropData; | ||
| export declare function getDropData(event: DragEvent, dragIsExternal: boolean): DragDropData; | ||
| export declare function filterEffects(effects: DropEffect[], allowed: EffectAllowed | DropEffect): DropEffect[]; | ||
| export declare function getDirectChildElement(parentElement: Element, childElement: Element): Element | null; | ||
| export declare function shouldPositionPlaceholderBeforeElement(event: DragEvent, element: Element, horizontal: boolean): boolean; | ||
| export declare function setDragImage(event: DragEvent, dragImage: Element): void; |
@@ -1,1 +0,1 @@ | ||
| [{"__symbolic":"module","version":3,"metadata":{"DragDropData":{"__symbolic":"interface"},"DndEvent":{"__symbolic":"interface"},"DROP_EFFECTS":{"__symbolic":"error","message":"Expression form not supported","line":12,"character":28},"CUSTOM_MIME_TYPE":"application/x-dnd","JSON_MIME_TYPE":"application/json","MSIE_MIME_TYPE":"Text","getWellKnownMimeType":{"__symbolic":"function"},"setDragData":{"__symbolic":"function"},"getDropData":{"__symbolic":"function"},"filterEffects":{"__symbolic":"function"},"getDirectChildElement":{"__symbolic":"function"},"shouldPositionPlaceholderBeforeElement":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"DragDropData":{"__symbolic":"interface"},"DndEvent":{"__symbolic":"interface"},"DROP_EFFECTS":{"__symbolic":"error","message":"Expression form not supported","line":12,"character":28},"CUSTOM_MIME_TYPE":"application/x-dnd","JSON_MIME_TYPE":"application/json","MSIE_MIME_TYPE":"Text","getWellKnownMimeType":{"__symbolic":"function"},"setDragData":{"__symbolic":"function"},"getDropData":{"__symbolic":"function"},"filterEffects":{"__symbolic":"function"},"getDirectChildElement":{"__symbolic":"function"},"shouldPositionPlaceholderBeforeElement":{"__symbolic":"function"}}}] | ||
| [{"__symbolic":"module","version":3,"metadata":{"DragDropData":{"__symbolic":"interface"},"DndEvent":{"__symbolic":"interface"},"DROP_EFFECTS":{"__symbolic":"error","message":"Expression form not supported","line":12,"character":28},"CUSTOM_MIME_TYPE":"application/x-dnd","JSON_MIME_TYPE":"application/json","MSIE_MIME_TYPE":"Text","getWellKnownMimeType":{"__symbolic":"function"},"setDragData":{"__symbolic":"function"},"getDropData":{"__symbolic":"function"},"filterEffects":{"__symbolic":"function"},"getDirectChildElement":{"__symbolic":"function"},"shouldPositionPlaceholderBeforeElement":{"__symbolic":"function"},"setDragImage":{"__symbolic":"function"}}},{"__symbolic":"module","version":1,"metadata":{"DragDropData":{"__symbolic":"interface"},"DndEvent":{"__symbolic":"interface"},"DROP_EFFECTS":{"__symbolic":"error","message":"Expression form not supported","line":12,"character":28},"CUSTOM_MIME_TYPE":"application/x-dnd","JSON_MIME_TYPE":"application/json","MSIE_MIME_TYPE":"Text","getWellKnownMimeType":{"__symbolic":"function"},"setDragData":{"__symbolic":"function"},"getDropData":{"__symbolic":"function"},"filterEffects":{"__symbolic":"function"},"getDirectChildElement":{"__symbolic":"function"},"shouldPositionPlaceholderBeforeElement":{"__symbolic":"function"},"setDragImage":{"__symbolic":"function"}}}] |
145
index.js
@@ -65,10 +65,10 @@ import { ContentChild, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, Output, Renderer2 } from '@angular/core'; | ||
| * @param {?} event | ||
| * @param {?} dragIsInternal | ||
| * @param {?} dragIsExternal | ||
| * @return {?} | ||
| */ | ||
| function getDropData(event, dragIsInternal) { | ||
| function getDropData(event, dragIsExternal) { | ||
| // check if the mime type is well known | ||
| var /** @type {?} */ mimeType = getWellKnownMimeType(event); | ||
| // drag did not originate from [dndDraggable] | ||
| if (dragIsInternal === false) { | ||
| if (dragIsExternal === true) { | ||
| if (mimeType !== null | ||
@@ -127,6 +127,15 @@ && mimeTypeIsCustom(mimeType)) { | ||
| } | ||
| else { | ||
| return (event.clientY < bounds.top + bounds.height / 2); | ||
| } | ||
| return (event.clientY < bounds.top + bounds.height / 2); | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} dragImage | ||
| * @return {?} | ||
| */ | ||
| function setDragImage(event, dragImage) { | ||
| // TODO include dragImage padding/border into offset calculation? | ||
| var /** @type {?} */ offX = event.offsetX; | ||
| var /** @type {?} */ offY = event.offsetY; | ||
| ((event.dataTransfer)).setDragImage(dragImage, offX, offY); | ||
| } | ||
@@ -250,4 +259,31 @@ var DndHandleDirective = (function () { | ||
| } | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| function isExternalDrag() { | ||
| return _dndState.isDragging === false; | ||
| } | ||
| var dndState = (_dndState); | ||
| var DndElementRefDirective = (function () { | ||
| /** | ||
| * @param {?} elementRef | ||
| */ | ||
| function DndElementRefDirective(elementRef) { | ||
| this.elementRef = elementRef; | ||
| } | ||
| return DndElementRefDirective; | ||
| }()); | ||
| DndElementRefDirective.decorators = [ | ||
| { type: Directive, args: [{ | ||
| selector: "[dndPlaceholderRef], [dndDragImageRef]" | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| DndElementRefDirective.ctorParameters = function () { return [ | ||
| { type: ElementRef, }, | ||
| ]; }; | ||
| var DndDraggableDirective = (function () { | ||
@@ -274,2 +310,14 @@ /** | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.ngOnInit = function () { | ||
| // evaluate custom drag image existence | ||
| if (typeof this.dndDragImageRef !== "undefined") { | ||
| this.dragImage = (this.dndDragImageRef.elementRef.nativeElement); | ||
| } | ||
| else { | ||
| this.dragImage = this.elementRef.nativeElement; | ||
| } | ||
| }; | ||
| /** | ||
| * @param {?} changes | ||
@@ -279,2 +327,3 @@ * @return {?} | ||
| DndDraggableDirective.prototype.ngOnChanges = function (changes) { | ||
| // reevaluate dragability | ||
| if (changes.dndDisableIf) { | ||
@@ -301,12 +350,14 @@ this.draggable = !changes.dndDisableIf.currentValue; | ||
| setDragData(event, { data: this.dndDraggable, type: this.dndType }, dndState.effectAllowed); | ||
| // set css | ||
| this.renderer.addClass(this.elementRef.nativeElement, this.dndDraggingClass); | ||
| window.setTimeout(function () { | ||
| // add dragging source css class on first drag event | ||
| var /** @type {?} */ unregister = this.renderer.listen(this.elementRef.nativeElement, "drag", function () { | ||
| _this.renderer.addClass(_this.elementRef.nativeElement, _this.dndDraggingSourceClass); | ||
| }, 0); | ||
| unregister(); | ||
| }); | ||
| // set dragging css class prior to setDragImage so styles are applied before | ||
| this.renderer.addClass(this.dragImage, this.dndDraggingClass); | ||
| // set custom dragimage if present | ||
| // set dragimage if drag is started from dndHandle | ||
| if (typeof event._dndHandle !== "undefined") { | ||
| var /** @type {?} */ offX = event.offsetX; | ||
| var /** @type {?} */ offY = event.offsetY; | ||
| ((event.dataTransfer)).setDragImage(this.elementRef.nativeElement, offX, offY); | ||
| if (typeof this.dndDragImageRef !== "undefined" | ||
| || typeof event._dndHandle !== "undefined") { | ||
| setDragImage(event, this.dragImage); | ||
| } | ||
@@ -343,4 +394,3 @@ this.dndStart.emit(event); | ||
| endDrag(); | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDraggingClass); | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDraggingClass); | ||
| this.renderer.removeClass(this.dragImage, this.dndDraggingClass); | ||
| // IE9 special hammering | ||
@@ -381,2 +431,3 @@ window.setTimeout(function () { | ||
| 'dndHandle': [{ type: ContentChild, args: [DndHandleDirective,] },], | ||
| 'dndDragImageRef': [{ type: ContentChild, args: [DndElementRefDirective,] },], | ||
| 'onDragStart': [{ type: HostListener, args: ["dragstart", ["$event"],] },], | ||
@@ -397,6 +448,6 @@ 'onDragEnd': [{ type: HostListener, args: ["dragend", ["$event"],] },], | ||
| this.dndHorizontal = false; | ||
| this.dndPlaceholder = null; | ||
| this.dndDragoverClass = "dndDragover"; | ||
| this.dndDragover = new EventEmitter(); | ||
| this.dndDrop = new EventEmitter(); | ||
| this.placeholder = null; | ||
| } | ||
@@ -407,4 +458,5 @@ /** | ||
| DndDropzoneDirective.prototype.ngOnInit = function () { | ||
| if (this.dndPlaceholder) { | ||
| this.dndPlaceholder.remove(); | ||
| if (typeof this.dndPlaceholder !== "undefined") { | ||
| this.placeholder = (this.dndPlaceholder.elementRef.nativeElement); | ||
| this.placeholder.remove(); | ||
| } | ||
@@ -423,3 +475,3 @@ }; | ||
| // and external drag sources are not allowed -> deny it | ||
| if (dndState.isDragging === false | ||
| if (isExternalDrag() === true | ||
| && this.dndAllowExternal === false) { | ||
@@ -444,8 +496,8 @@ return false; | ||
| DndDropzoneDirective.prototype.checkAndUpdatePlaceholderPosition = function (event) { | ||
| if (this.dndPlaceholder === null) { | ||
| if (this.placeholder === null) { | ||
| return; | ||
| } | ||
| // make sure the placeholder is in the DOM | ||
| if (this.dndPlaceholder.parentNode !== this.elementRef.nativeElement) { | ||
| this.renderer.appendChild(this.elementRef.nativeElement, this.dndPlaceholder); | ||
| if (this.placeholder.parentNode !== this.elementRef.nativeElement) { | ||
| this.renderer.appendChild(this.elementRef.nativeElement, this.placeholder); | ||
| } | ||
@@ -456,3 +508,3 @@ // update the position if the event originates from a child element of the dropzone | ||
| if (directChild === null | ||
| || directChild === this.dndPlaceholder) { | ||
| || directChild === this.placeholder) { | ||
| return; | ||
@@ -463,4 +515,4 @@ } | ||
| // do insert before only if necessary | ||
| if (directChild.previousSibling !== this.dndPlaceholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.dndPlaceholder, directChild); | ||
| if (directChild.previousSibling !== this.placeholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.placeholder, directChild); | ||
| } | ||
@@ -470,4 +522,4 @@ } | ||
| // do insert after only if necessary | ||
| if (directChild.nextSibling !== this.dndPlaceholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.dndPlaceholder, directChild.nextSibling); | ||
| if (directChild.nextSibling !== this.placeholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.placeholder, directChild.nextSibling); | ||
| } | ||
@@ -480,7 +532,7 @@ } | ||
| DndDropzoneDirective.prototype.getPlaceholderIndex = function () { | ||
| if (this.dndPlaceholder === null) { | ||
| if (this.placeholder === null) { | ||
| return undefined; | ||
| } | ||
| var /** @type {?} */ element = (this.elementRef.nativeElement); | ||
| return Array.prototype.indexOf.call(element.children, this.dndPlaceholder); | ||
| return Array.prototype.indexOf.call(element.children, this.placeholder); | ||
| }; | ||
@@ -492,4 +544,4 @@ /** | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDragoverClass); | ||
| if (this.dndPlaceholder !== null) { | ||
| this.dndPlaceholder.remove(); | ||
| if (this.placeholder !== null) { | ||
| this.placeholder.remove(); | ||
| } | ||
@@ -502,2 +554,14 @@ }; | ||
| DndDropzoneDirective.prototype.onDragEnter = function (event) { | ||
| // check if another dropzone is activated | ||
| if (event._dndDropzoneActive === true) { | ||
| this.cleanupDragoverState(); | ||
| return; | ||
| } | ||
| // set as active if the target element is inside this dropzone | ||
| if (typeof event._dndDropzoneActive === "undefined") { | ||
| var /** @type {?} */ newTarget = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (this.elementRef.nativeElement.contains(newTarget)) { | ||
| event._dndDropzoneActive = true; | ||
| } | ||
| } | ||
| // check if this drag event is allowed to drop on this dropzone | ||
@@ -546,3 +610,3 @@ var /** @type {?} */ type = getDndType(event); | ||
| } | ||
| var /** @type {?} */ data = getDropData(event, dndState.isDragging); | ||
| var /** @type {?} */ data = getDropData(event, isExternalDrag()); | ||
| if (this.isDropAllowed(data.type) === false) { | ||
@@ -562,2 +626,3 @@ return; | ||
| dropEffect: dropEffect, | ||
| isExternal: isExternalDrag(), | ||
| data: data.data, | ||
@@ -578,6 +643,6 @@ index: dropIndex | ||
| // check if still inside this dropzone and not yet handled by another dropzone | ||
| if (typeof event._dndDragLeaveHandled === "undefined") { | ||
| if (typeof event._dndDropzoneActive === "undefined") { | ||
| var /** @type {?} */ newTarget = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (this.elementRef.nativeElement.contains(newTarget)) { | ||
| event._dndDragLeaveHandled = true; | ||
| event._dndDropzoneActive = true; | ||
| return; | ||
@@ -587,2 +652,4 @@ } | ||
| this.cleanupDragoverState(); | ||
| // cleanup drop effect when leaving dropzone | ||
| setDropEffect(event, "none"); | ||
| }; | ||
@@ -609,6 +676,6 @@ return DndDropzoneDirective; | ||
| 'dndHorizontal': [{ type: Input },], | ||
| 'dndPlaceholder': [{ type: Input },], | ||
| 'dndDragoverClass': [{ type: Input },], | ||
| 'dndDragover': [{ type: Output },], | ||
| 'dndDrop': [{ type: Output },], | ||
| 'dndPlaceholder': [{ type: ContentChild, args: [DndElementRefDirective,] },], | ||
| 'onDragEnter': [{ type: HostListener, args: ["dragenter", ["$event"],] },], | ||
@@ -633,3 +700,4 @@ 'onDragOver': [{ type: HostListener, args: ["dragover", ["$event"],] },], | ||
| DndDropzoneDirective, | ||
| DndHandleDirective | ||
| DndHandleDirective, | ||
| DndElementRefDirective | ||
| ], | ||
@@ -639,3 +707,4 @@ exports: [ | ||
| DndDropzoneDirective, | ||
| DndHandleDirective | ||
| DndHandleDirective, | ||
| DndElementRefDirective | ||
| ] | ||
@@ -642,0 +711,0 @@ },] }, |
@@ -1,158 +0,1 @@ | ||
| [ | ||
| { | ||
| "__symbolic": "module", | ||
| "version": 3, | ||
| "metadata": { | ||
| "DndModule": { | ||
| "__symbolic": "class", | ||
| "decorators": [ | ||
| { | ||
| "__symbolic": "call", | ||
| "expression": { | ||
| "__symbolic": "reference", | ||
| "module": "@angular/core", | ||
| "name": "NgModule" | ||
| }, | ||
| "arguments": [ | ||
| { | ||
| "imports": [ | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "@angular/common", | ||
| "name": "CommonModule" | ||
| } | ||
| ], | ||
| "declarations": [ | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-draggable.directive", | ||
| "name": "DndDraggableDirective" | ||
| }, | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-dropzone.directive", | ||
| "name": "DndDropzoneDirective" | ||
| }, | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-handle.directive", | ||
| "name": "DndHandleDirective" | ||
| } | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-draggable.directive", | ||
| "name": "DndDraggableDirective" | ||
| }, | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-dropzone.directive", | ||
| "name": "DndDropzoneDirective" | ||
| }, | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-handle.directive", | ||
| "name": "DndHandleDirective" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| "exports": [ | ||
| { | ||
| "from": "./dnd-draggable.directive" | ||
| }, | ||
| { | ||
| "from": "./dnd-dropzone.directive" | ||
| }, | ||
| { | ||
| "from": "./dnd-handle.directive" | ||
| }, | ||
| { | ||
| "from": "./dnd-types" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "__symbolic": "module", | ||
| "version": 1, | ||
| "metadata": { | ||
| "DndModule": { | ||
| "__symbolic": "class", | ||
| "decorators": [ | ||
| { | ||
| "__symbolic": "call", | ||
| "expression": { | ||
| "__symbolic": "reference", | ||
| "module": "@angular/core", | ||
| "name": "NgModule" | ||
| }, | ||
| "arguments": [ | ||
| { | ||
| "imports": [ | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "@angular/common", | ||
| "name": "CommonModule" | ||
| } | ||
| ], | ||
| "declarations": [ | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-draggable.directive", | ||
| "name": "DndDraggableDirective" | ||
| }, | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-dropzone.directive", | ||
| "name": "DndDropzoneDirective" | ||
| }, | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-handle.directive", | ||
| "name": "DndHandleDirective" | ||
| } | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-draggable.directive", | ||
| "name": "DndDraggableDirective" | ||
| }, | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-dropzone.directive", | ||
| "name": "DndDropzoneDirective" | ||
| }, | ||
| { | ||
| "__symbolic": "reference", | ||
| "module": "./dnd-handle.directive", | ||
| "name": "DndHandleDirective" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| "exports": [ | ||
| { | ||
| "from": "./dnd-draggable.directive" | ||
| }, | ||
| { | ||
| "from": "./dnd-dropzone.directive" | ||
| }, | ||
| { | ||
| "from": "./dnd-handle.directive" | ||
| }, | ||
| { | ||
| "from": "./dnd-types" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| [{"__symbolic":"module","version":3,"metadata":{"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}],"exports":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}]}},"exports":[{"from":"./dnd-draggable.directive"},{"from":"./dnd-dropzone.directive"},{"from":"./dnd-handle.directive"},{"from":"./dnd-types"}]},{"__symbolic":"module","version":1,"metadata":{"DndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}],"exports":[{"__symbolic":"reference","module":"./dnd-draggable.directive","name":"DndDraggableDirective"},{"__symbolic":"reference","module":"./dnd-dropzone.directive","name":"DndDropzoneDirective"},{"__symbolic":"reference","module":"./dnd-handle.directive","name":"DndHandleDirective"},{"__symbolic":"reference","module":"./dnd-element-ref.directive","name":"DndElementRefDirective"}]}]}]}},"exports":[{"from":"./dnd-draggable.directive"},{"from":"./dnd-dropzone.directive"},{"from":"./dnd-handle.directive"},{"from":"./dnd-types"}]}] |
@@ -68,10 +68,10 @@ (function (global, factory) { | ||
| * @param {?} event | ||
| * @param {?} dragIsInternal | ||
| * @param {?} dragIsExternal | ||
| * @return {?} | ||
| */ | ||
| function getDropData(event, dragIsInternal) { | ||
| function getDropData(event, dragIsExternal) { | ||
| // check if the mime type is well known | ||
| var /** @type {?} */ mimeType = getWellKnownMimeType(event); | ||
| // drag did not originate from [dndDraggable] | ||
| if (dragIsInternal === false) { | ||
| if (dragIsExternal === true) { | ||
| if (mimeType !== null | ||
@@ -130,6 +130,15 @@ && mimeTypeIsCustom(mimeType)) { | ||
| } | ||
| else { | ||
| return (event.clientY < bounds.top + bounds.height / 2); | ||
| } | ||
| return (event.clientY < bounds.top + bounds.height / 2); | ||
| } | ||
| /** | ||
| * @param {?} event | ||
| * @param {?} dragImage | ||
| * @return {?} | ||
| */ | ||
| function setDragImage(event, dragImage) { | ||
| // TODO include dragImage padding/border into offset calculation? | ||
| var /** @type {?} */ offX = event.offsetX; | ||
| var /** @type {?} */ offY = event.offsetY; | ||
| ((event.dataTransfer)).setDragImage(dragImage, offX, offY); | ||
| } | ||
@@ -253,4 +262,31 @@ var DndHandleDirective = (function () { | ||
| } | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| function isExternalDrag() { | ||
| return _dndState.isDragging === false; | ||
| } | ||
| var dndState = (_dndState); | ||
| var DndElementRefDirective = (function () { | ||
| /** | ||
| * @param {?} elementRef | ||
| */ | ||
| function DndElementRefDirective(elementRef) { | ||
| this.elementRef = elementRef; | ||
| } | ||
| return DndElementRefDirective; | ||
| }()); | ||
| DndElementRefDirective.decorators = [ | ||
| { type: _angular_core.Directive, args: [{ | ||
| selector: "[dndPlaceholderRef], [dndDragImageRef]" | ||
| },] }, | ||
| ]; | ||
| /** | ||
| * @nocollapse | ||
| */ | ||
| DndElementRefDirective.ctorParameters = function () { return [ | ||
| { type: _angular_core.ElementRef, }, | ||
| ]; }; | ||
| var DndDraggableDirective = (function () { | ||
@@ -277,2 +313,14 @@ /** | ||
| /** | ||
| * @return {?} | ||
| */ | ||
| DndDraggableDirective.prototype.ngOnInit = function () { | ||
| // evaluate custom drag image existence | ||
| if (typeof this.dndDragImageRef !== "undefined") { | ||
| this.dragImage = (this.dndDragImageRef.elementRef.nativeElement); | ||
| } | ||
| else { | ||
| this.dragImage = this.elementRef.nativeElement; | ||
| } | ||
| }; | ||
| /** | ||
| * @param {?} changes | ||
@@ -282,2 +330,3 @@ * @return {?} | ||
| DndDraggableDirective.prototype.ngOnChanges = function (changes) { | ||
| // reevaluate dragability | ||
| if (changes.dndDisableIf) { | ||
@@ -304,12 +353,14 @@ this.draggable = !changes.dndDisableIf.currentValue; | ||
| setDragData(event, { data: this.dndDraggable, type: this.dndType }, dndState.effectAllowed); | ||
| // set css | ||
| this.renderer.addClass(this.elementRef.nativeElement, this.dndDraggingClass); | ||
| window.setTimeout(function () { | ||
| // add dragging source css class on first drag event | ||
| var /** @type {?} */ unregister = this.renderer.listen(this.elementRef.nativeElement, "drag", function () { | ||
| _this.renderer.addClass(_this.elementRef.nativeElement, _this.dndDraggingSourceClass); | ||
| }, 0); | ||
| unregister(); | ||
| }); | ||
| // set dragging css class prior to setDragImage so styles are applied before | ||
| this.renderer.addClass(this.dragImage, this.dndDraggingClass); | ||
| // set custom dragimage if present | ||
| // set dragimage if drag is started from dndHandle | ||
| if (typeof event._dndHandle !== "undefined") { | ||
| var /** @type {?} */ offX = event.offsetX; | ||
| var /** @type {?} */ offY = event.offsetY; | ||
| ((event.dataTransfer)).setDragImage(this.elementRef.nativeElement, offX, offY); | ||
| if (typeof this.dndDragImageRef !== "undefined" | ||
| || typeof event._dndHandle !== "undefined") { | ||
| setDragImage(event, this.dragImage); | ||
| } | ||
@@ -346,4 +397,3 @@ this.dndStart.emit(event); | ||
| endDrag(); | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDraggingClass); | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDraggingClass); | ||
| this.renderer.removeClass(this.dragImage, this.dndDraggingClass); | ||
| // IE9 special hammering | ||
@@ -384,2 +434,3 @@ window.setTimeout(function () { | ||
| 'dndHandle': [{ type: _angular_core.ContentChild, args: [DndHandleDirective,] },], | ||
| 'dndDragImageRef': [{ type: _angular_core.ContentChild, args: [DndElementRefDirective,] },], | ||
| 'onDragStart': [{ type: _angular_core.HostListener, args: ["dragstart", ["$event"],] },], | ||
@@ -400,6 +451,6 @@ 'onDragEnd': [{ type: _angular_core.HostListener, args: ["dragend", ["$event"],] },], | ||
| this.dndHorizontal = false; | ||
| this.dndPlaceholder = null; | ||
| this.dndDragoverClass = "dndDragover"; | ||
| this.dndDragover = new _angular_core.EventEmitter(); | ||
| this.dndDrop = new _angular_core.EventEmitter(); | ||
| this.placeholder = null; | ||
| } | ||
@@ -410,4 +461,5 @@ /** | ||
| DndDropzoneDirective.prototype.ngOnInit = function () { | ||
| if (this.dndPlaceholder) { | ||
| this.dndPlaceholder.remove(); | ||
| if (typeof this.dndPlaceholder !== "undefined") { | ||
| this.placeholder = (this.dndPlaceholder.elementRef.nativeElement); | ||
| this.placeholder.remove(); | ||
| } | ||
@@ -426,3 +478,3 @@ }; | ||
| // and external drag sources are not allowed -> deny it | ||
| if (dndState.isDragging === false | ||
| if (isExternalDrag() === true | ||
| && this.dndAllowExternal === false) { | ||
@@ -447,8 +499,8 @@ return false; | ||
| DndDropzoneDirective.prototype.checkAndUpdatePlaceholderPosition = function (event) { | ||
| if (this.dndPlaceholder === null) { | ||
| if (this.placeholder === null) { | ||
| return; | ||
| } | ||
| // make sure the placeholder is in the DOM | ||
| if (this.dndPlaceholder.parentNode !== this.elementRef.nativeElement) { | ||
| this.renderer.appendChild(this.elementRef.nativeElement, this.dndPlaceholder); | ||
| if (this.placeholder.parentNode !== this.elementRef.nativeElement) { | ||
| this.renderer.appendChild(this.elementRef.nativeElement, this.placeholder); | ||
| } | ||
@@ -459,3 +511,3 @@ // update the position if the event originates from a child element of the dropzone | ||
| if (directChild === null | ||
| || directChild === this.dndPlaceholder) { | ||
| || directChild === this.placeholder) { | ||
| return; | ||
@@ -466,4 +518,4 @@ } | ||
| // do insert before only if necessary | ||
| if (directChild.previousSibling !== this.dndPlaceholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.dndPlaceholder, directChild); | ||
| if (directChild.previousSibling !== this.placeholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.placeholder, directChild); | ||
| } | ||
@@ -473,4 +525,4 @@ } | ||
| // do insert after only if necessary | ||
| if (directChild.nextSibling !== this.dndPlaceholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.dndPlaceholder, directChild.nextSibling); | ||
| if (directChild.nextSibling !== this.placeholder) { | ||
| this.renderer.insertBefore(this.elementRef.nativeElement, this.placeholder, directChild.nextSibling); | ||
| } | ||
@@ -483,7 +535,7 @@ } | ||
| DndDropzoneDirective.prototype.getPlaceholderIndex = function () { | ||
| if (this.dndPlaceholder === null) { | ||
| if (this.placeholder === null) { | ||
| return undefined; | ||
| } | ||
| var /** @type {?} */ element = (this.elementRef.nativeElement); | ||
| return Array.prototype.indexOf.call(element.children, this.dndPlaceholder); | ||
| return Array.prototype.indexOf.call(element.children, this.placeholder); | ||
| }; | ||
@@ -495,4 +547,4 @@ /** | ||
| this.renderer.removeClass(this.elementRef.nativeElement, this.dndDragoverClass); | ||
| if (this.dndPlaceholder !== null) { | ||
| this.dndPlaceholder.remove(); | ||
| if (this.placeholder !== null) { | ||
| this.placeholder.remove(); | ||
| } | ||
@@ -505,2 +557,14 @@ }; | ||
| DndDropzoneDirective.prototype.onDragEnter = function (event) { | ||
| // check if another dropzone is activated | ||
| if (event._dndDropzoneActive === true) { | ||
| this.cleanupDragoverState(); | ||
| return; | ||
| } | ||
| // set as active if the target element is inside this dropzone | ||
| if (typeof event._dndDropzoneActive === "undefined") { | ||
| var /** @type {?} */ newTarget = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (this.elementRef.nativeElement.contains(newTarget)) { | ||
| event._dndDropzoneActive = true; | ||
| } | ||
| } | ||
| // check if this drag event is allowed to drop on this dropzone | ||
@@ -549,3 +613,3 @@ var /** @type {?} */ type = getDndType(event); | ||
| } | ||
| var /** @type {?} */ data = getDropData(event, dndState.isDragging); | ||
| var /** @type {?} */ data = getDropData(event, isExternalDrag()); | ||
| if (this.isDropAllowed(data.type) === false) { | ||
@@ -565,2 +629,3 @@ return; | ||
| dropEffect: dropEffect, | ||
| isExternal: isExternalDrag(), | ||
| data: data.data, | ||
@@ -581,6 +646,6 @@ index: dropIndex | ||
| // check if still inside this dropzone and not yet handled by another dropzone | ||
| if (typeof event._dndDragLeaveHandled === "undefined") { | ||
| if (typeof event._dndDropzoneActive === "undefined") { | ||
| var /** @type {?} */ newTarget = document.elementFromPoint(event.clientX, event.clientY); | ||
| if (this.elementRef.nativeElement.contains(newTarget)) { | ||
| event._dndDragLeaveHandled = true; | ||
| event._dndDropzoneActive = true; | ||
| return; | ||
@@ -590,2 +655,4 @@ } | ||
| this.cleanupDragoverState(); | ||
| // cleanup drop effect when leaving dropzone | ||
| setDropEffect(event, "none"); | ||
| }; | ||
@@ -612,6 +679,6 @@ return DndDropzoneDirective; | ||
| 'dndHorizontal': [{ type: _angular_core.Input },], | ||
| 'dndPlaceholder': [{ type: _angular_core.Input },], | ||
| 'dndDragoverClass': [{ type: _angular_core.Input },], | ||
| 'dndDragover': [{ type: _angular_core.Output },], | ||
| 'dndDrop': [{ type: _angular_core.Output },], | ||
| 'dndPlaceholder': [{ type: _angular_core.ContentChild, args: [DndElementRefDirective,] },], | ||
| 'onDragEnter': [{ type: _angular_core.HostListener, args: ["dragenter", ["$event"],] },], | ||
@@ -636,3 +703,4 @@ 'onDragOver': [{ type: _angular_core.HostListener, args: ["dragover", ["$event"],] },], | ||
| DndDropzoneDirective, | ||
| DndHandleDirective | ||
| DndHandleDirective, | ||
| DndElementRefDirective | ||
| ], | ||
@@ -642,3 +710,4 @@ exports: [ | ||
| DndDropzoneDirective, | ||
| DndHandleDirective | ||
| DndHandleDirective, | ||
| DndElementRefDirective | ||
| ] | ||
@@ -645,0 +714,0 @@ },] }, |
| { | ||
| "name": "ngx-drag-drop", | ||
| "version": "1.0.0-beta.0", | ||
| "version": "1.0.0-beta.1", | ||
| "description": "Angular directives using the native HTML Drag And Drop API", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/reppners/ngx-drag-drop.git" | ||
| }, | ||
| "homepage": "https://reppners.github.io/ngx-drag-drop/", | ||
@@ -35,10 +39,15 @@ "author": { | ||
| "devDependencies": { | ||
| "@angular/animations": "^4.2.3", | ||
| "@angular/cli": "1.0.6", | ||
| "@angular/common": "^4.0.0", | ||
| "@angular/compiler": "^4.0.0", | ||
| "@angular/compiler-cli": "^4.0.0", | ||
| "@angular/core": "^4.0.0", | ||
| "@angular/platform-browser": "^4.0.0", | ||
| "@angular/platform-browser-dynamic": "^4.0.0", | ||
| "@angular/router": "^4.0.0", | ||
| "@angular/common": "^4.2.0", | ||
| "@angular/compiler": "^4.2.0", | ||
| "@angular/compiler-cli": "^4.2.0", | ||
| "@angular/core": "^4.2.0", | ||
| "@angular/flex-layout": "^2.0.0-beta.8", | ||
| "@angular/forms": "^4.2.3", | ||
| "@angular/http": "^4.2.3", | ||
| "@angular/material": "^2.0.0-beta.7", | ||
| "@angular/platform-browser": "^4.2.0", | ||
| "@angular/platform-browser-dynamic": "^4.2.0", | ||
| "@angular/router": "^4.2.0", | ||
| "@types/jasmine": "2.5.38", | ||
@@ -45,0 +54,0 @@ "@types/node": "~6.0.60", |
142
README.MD
| [](https://www.npmjs.com/package/ngx-drag-drop) | ||
| [](https://github.com/reppners/ngx-drag-drop/issues) | ||
| [](https://twitter.com/intent/tweet?text=Wow:&url=%5Bobject%20Object%5D) | ||
| [](https://twitter.com/intent/tweet?text=Angular%20drag%20and%20drop%20with%20ease:&url=https://github.com/reppners/ngx-drag-drop) | ||
| # NgxDragDrop | ||
| **This project is currently under development!** | ||
| Set of Angular directives for declarative drag and drop using the HTML5 Drag-And-Drop API. | ||
| # NgxDragDrop | ||
| * nesting | ||
| * sortable lists by using placeholder element (vertical and horizontal) | ||
| * dropzones optionally support external/native draggables (img, txt, file) | ||
| * conditional drag/drop | ||
| * typed drag/drop | ||
| * utilize EffectAllowed | ||
| * custom CSS classes | ||
| * touch support by using a [polyfill](https://github.com/timruffles/ios-html5-drag-drop-shim/tree/rewrite) | ||
| * AOT compatible | ||
| Install with `npm install ngx-drag-drop@next --save` | ||
| Port of [angular-drag-drop-lists](https://github.com/marceljuenemann/angular-drag-and-drop-lists) but without the lists :wink: | ||
@@ -15,29 +26,52 @@ | ||
| For touch support please use this [polyfill](https://github.com/timruffles/ios-html5-drag-drop-shim/tree/rewrite). | ||
| ## Usage | ||
| `npm install ngx-drag-drop` | ||
| `app.component.html` | ||
| ```HTML | ||
| <!--a draggable element--> | ||
| <div [dndDraggable]="draggable.data" | ||
| [dndEffectAllowed]="draggable.effectAllowed" | ||
| [dndDisableIf]="draggable.disable" | ||
| (dndStart)="onDragStart($event)" | ||
| (dndCopied)="onDraggableCopied($event)" | ||
| (dndLinked)="onDraggableLinked($event)" | ||
| (dndMoved)="onDraggableMoved($event)" | ||
| (dndCanceled)="onDragCanceled($event)" | ||
| (dndEnd)="onDragEnd($event)"> | ||
| <!--if [dndHandle] is used inside dndDraggable drag can only start from the handle--> | ||
| <div *ngIf="draggable.handle" | ||
| dndHandle>HANDLE | ||
| </div> | ||
| draggable ({{draggable.effectAllowed}}) <span [hidden]="!draggable.disable">DISABLED</span> | ||
| </div> | ||
| <!--a dropzone--> | ||
| <!--to allow dropping content that is not [dndDraggable] set dndAllowExternal to true--> | ||
| <section dndDropzone | ||
| (dndDragover)="onDragover($event)" | ||
| (dndDrop)="onDrop($event)"> | ||
| dropzone | ||
| <!--optional placeholder element for dropzone--> | ||
| <!--will be removed from DOM on init--> | ||
| <div style="border: 1px orangered solid; border-radius: 5px; padding: 15px;" | ||
| dndPlaceholderRef> | ||
| placeholder | ||
| </div> | ||
| </section> | ||
| ``` | ||
| `app.component` | ||
| ```JS | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { Component } from '@angular/core'; | ||
| import { AppComponent } from './app.component'; | ||
| import { DndDropEvent } from 'ngx-drag-drop'; | ||
| import { DndModule, DndDropEvent } from 'ngx-drag-drop'; | ||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| DndModule | ||
| ], | ||
| providers: [], | ||
| bootstrap: [AppComponent] | ||
| }) | ||
| export class AppModule { | ||
| @Component() | ||
| export class AppComponent { | ||
@@ -95,34 +129,25 @@ draggable = { | ||
| ```HTML | ||
| <div [dndDraggable]="draggable.data" | ||
| [dndEffectAllowed]="draggable.effectAllowed" | ||
| [dndDisableIf]="draggable.disable" | ||
| (dndStart)="onDragStart($event)" | ||
| (dndCopied)="onDraggableCopied($event)" | ||
| (dndLinked)="onDraggableLinked($event)" | ||
| (dndMoved)="onDraggableMoved($event)" | ||
| (dndCanceled)="onDragCanceled($event)" | ||
| (dndEnd)="onDragEnd($event)"> | ||
| <!--if [dndHandle] is used inside dndDraggable drag can only start from the handle--> | ||
| <div *ngIf="draggable.handle" | ||
| dndHandle>HANDLE | ||
| </div> | ||
| draggable ({{draggable.effectAllowed}}) <span [hidden]="!draggable.disable">DISABLED</span> | ||
| </div> | ||
| `app.module` | ||
| <div style="border: 1px orangered solid; border-radius: 5px; padding: 15px;" | ||
| #placeholder> | ||
| placeholder | ||
| </div> | ||
| ```JS | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
| <section dndDropzone | ||
| (dndDragover)="onDragover($event)" | ||
| (dndDrop)="onDrop($event)"> | ||
| dropzone | ||
| import { DndModule } from 'ngx-drag-drop'; | ||
| </section> | ||
| import { AppComponent } from './app.component'; | ||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| DndModule | ||
| ], | ||
| providers: [], | ||
| bootstrap: [AppComponent] | ||
| }) | ||
| export class AppModule { | ||
| } | ||
| ``` | ||
@@ -190,2 +215,5 @@ | ||
| // true if the drag did not origin from a [dndDraggable] | ||
| isExternal:boolean; | ||
| // the data set on the draggable | ||
@@ -218,5 +246,2 @@ data?: any; | ||
| // optionally pass a placeholder to indicate the drop position | ||
| dndPlaceholder: Element | null; | ||
| // set the class applied to the dropzone | ||
@@ -236,3 +261,3 @@ // when a draggable is dragged over it | ||
| Native drag and drop API's are not behaving the same way across browsers. | ||
| HTML Drag-And-Drop API implementations are not behaving the same way across browsers. | ||
@@ -250,4 +275,5 @@ The directives contained in this module enable declarative drag and drop that "just works" across browsers in a consistent way. | ||
| * assure correct version is set in `package.json` | ||
| * build library with `npm run build:lib` | ||
| * publish library with `npm publish dist` | ||
| * publish library with `npm run publish:stable` (use `npm run publish:next` for pre-releases) | ||
@@ -254,0 +280,0 @@ #### Docs |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by8.78%
84291
- Number of package files
- increased by11.76%
19
- Number of lines in readme file
- increased by10.32%
278
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by15.15%
38
- Lines of code
- decreased by-0.67%
1493
No dependency changes