Added a dragging feature

src/app/demo/main/main.component.html

@@ -36,6 +36,8 @@ <h1 class="title">ngx-smart-modal</h1>
                 style="position:absolute;top: 300px;left: 900px;">Custom target modal</button>
         <button class="button -regular"
                 (click)="goNewDynamic()">Create dynamic modal<span>new</span></button>
+        <button class="button -regular"
+                (click)="draggableModal.open()">Draggable modal<span>new</span></button>
     </div>
 
     <h3 class="title">Examples with CSS frameworks</h3>
@@ -331,3 +333,27 @@ <h1>Hey, I am a modal placed relatively to an element!</h1>
     <button class="button -dark"
             (click)="customTarget.close()">Close</button>
 </ngx-smart-modal>
+
+<ngx-smart-modal #draggableModal 
+                 [draggable]="true" 
+                 [draggableEdges]="true" 
+                 identifier="draggableModal">
+    <h1>Hey, you can drag me anywhere by holding my edges or handle!</h1>
+    <p>Add class ".draggable" to any element inside modal to make it a drag handle.</p><br>
+    <span class="draggable">Handle</span>
+    <span>Not handle</span>
+    <br><br>
+    <button class="button -regular" (click)="secondDraggableModal.open()">Second draggable
+        modal<span>new</span></button>
+
+</ngx-smart-modal>
+
+<ngx-smart-modal #secondDraggableModal 
+                 [draggable]="true" 
+                 identifier="secondDraggableModal">
+    <h1>Hey, I will move independently from my parent!</h1>
+    <p>I can only be moved by a handle.</p><br>
+    <span class="draggable">Handle</span>
+    <span>Not handle</span>
+    <br><br>
+</ngx-smart-modal>

src/app/demo/main/main.component.scss

@@ -29,3 +29,11 @@
     }
   }
 }
+
+span.draggable{
+  color:white;
+  padding: 5px;
+  text-align: center;
+  background-color:gray;
+  margin-right: 10px;
+}

src/ngx-smart-modal/src/components/ngx-smart-modal.component.ts

@@ -23,8 +23,8 @@ import { NgxSmartModalConfig } from '../config/ngx-smart-modal.config';
          [ngClass]="{'transparent':!backdrop, 'overlay':true, 'nsm-overlay-open':openedClass}"
          (mousedown)="dismiss($event)" #nsmOverlay>
       <div [style.z-index]="visible ? layerPosition : -1"
-           [ngClass]="['nsm-dialog', customClass, openedClass ? 'nsm-dialog-open': 'nsm-dialog-close']" #nsmDialog>
-        <div class="nsm-content" #nsmContent>
+           [ngClass]="['nsm-dialog', customClass, openedClass ? 'nsm-dialog-open': 'nsm-dialog-close']" [style.position]="draggable?'absolute':'relative'" #nsmDialog>
+        <div class="nsm-content" #nsmContent  [class.draggable]="draggable && draggableEdges">
           <div class="nsm-body">
             <ng-content></ng-content>
           </div>
@@ -49,6 +49,8 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
   @Input() public hideDelay: number = 500;
   @Input() public autostart: boolean = false;
   @Input() public target: string = '';
+  @Input() public draggable: boolean = false;
+  @Input() public draggableEdges: boolean = false;
 
   @Output() public visibleChange: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output() public onClose: EventEmitter<any> = new EventEmitter();
@@ -71,6 +73,10 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
 
   private _data: any;
 
+  private positionX = 0;
+  private positionY = 0;
+  private dragging = false;
+
   @ViewChildren('nsmContent') private nsmContent!: QueryList<ElementRef>;
   @ViewChildren('nsmDialog') private nsmDialog!: QueryList<ElementRef>;
   @ViewChildren('nsmOverlay') private nsmOverlay!: QueryList<ElementRef>;
@@ -92,6 +98,79 @@ export class NgxSmartModalComponent implements OnInit, OnDestroy {
     this._sendEvent('delete');
   }
 
+  /**
+  * Set positionX and positionY to save last position of dragged modal
+  */
+  public setPosition(posX: number, posY: number) {
+    this.positionX = posX;
+    this.positionY = posY;
+  }
+
+  /**
+  * Moves dialog by changing top and left style of modal dialog by offset
+  */
+  public moveDialog(offsetX: number, offsetY: number) {
+    if (!this.nsmDialog.length) {
+      return false;
+    }
+    this.nsmDialog.last.nativeElement.style.top = (this.nsmDialog.last.nativeElement.offsetTop - offsetY) + "px";
+    this.nsmDialog.last.nativeElement.style.left = (this.nsmDialog.last.nativeElement.offsetLeft - offsetX) + "px";
+    return true;
+  }
+
+  /**
+  * Listens for mouse down event to initiate dragging of the modal
+  */
+  @HostListener('document:mousedown', ['$event'])
+  startDrag(e: MouseEvent) {
+    if (!this.nsmContent.length || !this.draggable) {
+      return false;
+    }
+
+    const src = e.srcElement as HTMLElement;
+    if (src && src.classList.contains('draggable')) {
+      if (this.nsmContent.last.nativeElement.contains(src) && !this.dragging) {
+        e.preventDefault();
+
+        this.dragging = true;
+        this.setPosition(e.clientX, e.clientY);
+
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+  * Listens for mouse move event and reflects the movement of the mouse to modal position
+  */
+  @HostListener('document:mousemove', ['$event'])
+  elementDrag(e: MouseEvent) {
+    if (!this.dragging || !this.nsmDialog.length) {
+      return false;
+    }
+    e.preventDefault();
+
+    const offsetX = this.positionX - e.clientX;
+    const offsetY = this.positionY - e.clientY;
+
+    this.moveDialog(offsetX, offsetY);
+
+    this.setPosition(e.clientX, e.clientY);
+
+    return true;
+  }
+
+
+  /**
+  * Listens for mouse up event to stop moving dragged modal
+  */
+  @HostListener('document:mouseup', ['$event'])
+  stopDrag() {
+    this.dragging = false;
+  }
+
   /**
    * Open the modal instance
    *

src/ngx-smart-modal/src/ngx-smart-modal.scss

@@ -43,6 +43,8 @@ body.dialog-open {
   bottom: 0;
   left: 0;
   right: 0;
+  display: flex;
+  justify-content: center;
   overflow-x: hidden;
   overflow-y: auto;
   transition: background-color $transition-duration;
@@ -165,3 +167,11 @@ body.dialog-open {
     transform: translate3d(0, 50%, 0);
   }
 }
+
+.draggable {
+  cursor: move;
+
+  div {
+    cursor: default;
+  }
+}