From 9b5a6b071f03c7b132f2f859fcbacfc14494c55e Mon Sep 17 00:00:00 2001
From: Matt Lewis <hello@mattlewis.me>
Date: Wed, 6 Jun 2018 14:31:55 +0100
Subject: [PATCH] fix: set dimensions and z-index on ghost element

---
 src/draggable.directive.ts       | 10 ++++++++--
 test/draggable.directive.spec.ts |  6 ++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/draggable.directive.ts b/src/draggable.directive.ts
index 39916b4..2830ab3 100644
--- a/src/draggable.directive.ts
+++ b/src/draggable.directive.ts
@@ -228,7 +228,10 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
               this.setElementStyles({
                 position: 'fixed',
                 top: `${rect.top}px`,
-                left: `${rect.left}px`
+                left: `${rect.left}px`,
+                width: `${rect.width}px`,
+                height: `${rect.height}px`,
+                zIndex: '10'
               });
 
               dragEnd$.subscribe(() => {
@@ -236,7 +239,10 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
                 this.setElementStyles({
                   position: '',
                   top: '',
-                  left: ''
+                  left: '',
+                  width: '',
+                  height: '',
+                  zIndex: ''
                 });
               });
             }
diff --git a/test/draggable.directive.spec.ts b/test/draggable.directive.spec.ts
index ce4f0a5..8a0beef 100644
--- a/test/draggable.directive.spec.ts
+++ b/test/draggable.directive.spec.ts
@@ -578,6 +578,9 @@ describe('draggable directive', () => {
     expect(draggableElement.style.position).to.equal('fixed');
     expect(draggableElement.style.top).to.be.ok;
     expect(draggableElement.style.left).to.be.ok;
+    expect(draggableElement.style.width).to.be.ok;
+    expect(draggableElement.style.height).to.be.ok;
+    expect(draggableElement.style.zIndex).to.equal('10');
     expect(draggableElement.previousSibling).to.be.ok;
     expect(
       (draggableElement.previousElementSibling as HTMLElement).style.visibility
@@ -591,6 +594,9 @@ describe('draggable directive', () => {
     expect(draggableElement.style.position).not.to.be.ok;
     expect(draggableElement.style.top).not.to.be.ok;
     expect(draggableElement.style.left).not.to.be.ok;
+    expect(draggableElement.style.width).not.to.be.ok;
+    expect(draggableElement.style.height).not.to.be.ok;
+    expect(draggableElement.style.zIndex).not.to.be.ok;
     expect(
       (draggableElement.previousElementSibling as HTMLElement).hasAttribute(
         'mwldraggable'