feat(draggable): add option to show the original element while dragging

Author: csigritz

src/draggable.directive.ts

@@ -84,6 +84,11 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
    */
   @Input() ghostDragEnabled: boolean = true;
 
+  /**
+   * Show the original element when ghostDragEnabled is true
+   */
+  @Input() showOriginalElementWhileDragging: boolean = false;
+
   /**
    * Allow custom behaviour to control when the element is dragged
    */
@@ -264,11 +269,13 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
             const clone = this.element.nativeElement.cloneNode(
               true
             ) as HTMLElement;
-            this.renderer.setStyle(
-              this.element.nativeElement,
-              'visibility',
-              'hidden'
-            );
+            if (!this.showOriginalElementWhileDragging) {
+              this.renderer.setStyle(
+                this.element.nativeElement,
+                'visibility',
+                'hidden'
+              );
+            }
 
             if (this.ghostElementAppendTo) {
               this.ghostElementAppendTo.appendChild(clone);

test/draggable.directive.spec.ts

@@ -15,6 +15,7 @@ describe('draggable directive', () => {
         [dragAxis]="dragAxis"
         [dragSnapGrid]="dragSnapGrid"
         [ghostDragEnabled]="ghostDragEnabled"
+        [showOriginalElementWhileDragging]="showOriginalElementWhileDragging"
         [validateDrag]="validateDrag"
         [dragCursor]="dragCursor"
         [dragActiveClass]="dragActiveClass"
@@ -36,6 +37,7 @@ describe('draggable directive', () => {
     dragAxis: any = { x: true, y: true };
     dragSnapGrid: any = {};
     ghostDragEnabled: boolean = true;
+    showOriginalElementWhileDragging: boolean = false;
     validateDrag: ValidateDrag;
     dragCursor = 'move';
     dragActiveClass: string;
@@ -587,6 +589,17 @@ describe('draggable directive', () => {
     expect(draggableElement.style.visibility).not.to.be.ok;
   });
 
+  it('should create a clone of the element and leave old element visible', () => {
+    fixture.componentInstance.showOriginalElementWhileDragging = true;
+    fixture.detectChanges();
+    const draggableElement =
+      fixture.componentInstance.draggableElement.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
+    triggerDomEvent('mousemove', draggableElement, { clientX: 7, clientY: 10 });
+    expect(draggableElement.style.visibility).not.to.be.ok;
+    triggerDomEvent('mouseup', draggableElement, { clientX: 7, clientY: 8 });
+  });
+
   it('should add and remove the drag active class', () => {
     fixture.componentInstance.dragActiveClass = 'drag-active';
     fixture.detectChanges();