feat(ghostElementAppendTo): allow the ghost element parent to be customised

Author: mattlewis92

src/draggable.directive.ts

@@ -90,6 +90,11 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
    */
   @Input() dragActiveClass: string;
 
+  /**
+   * The element the ghost element will be appended to. Default is document.body
+   */
+  @Input() ghostElementAppendTo: HTMLElement;
+
   /**
    * Called when the element can be dragged along one axis and has the mouse or pointer device pressed on it
    */
@@ -239,7 +244,9 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
               'visibility',
               'hidden'
             );
-            this.document.body.appendChild(clone);
+            const appendToElement =
+              this.ghostElementAppendTo || this.document.body;
+            appendToElement.appendChild(clone);
             this.ghostElement = clone;
 
             this.setElementStyles(clone, {