title: Drag to move a component around the page?
body: <p>I am defining a popup dialog box component which will allow a user to input some data to place on the page. The end result is for it to appear when a button on the screen is clicked, and also able to be dragged around the page.</p>
  
  <p>I don't have much of this component yet, here is the code for it:</p>
  
  <pre><code>//edit-global-names-dialog-box.component.ts
  
  import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'edit-global-names-dialog-box',
      templateUrl: './edit-global-names-dialog-box.component.html',
      styleUrls: ['./edit-global-names-dialog-box.component.css']
  })
  export class EditGlobalNamesDialogBoxComponent implements OnInit{
  
      constructor() {}
  
      ngOnInit() {
      }
  }
  
  //edit-global-names-dialog-box.component.html
  
  &lt;div id="dialog-box-container"&gt;
      &lt;div id="header"&gt;
  
      &lt;/div&gt;
      &lt;div id="content"&gt;
  
      &lt;/div&gt;
      &lt;div id="footer"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  //edit-global-names-dialog-box.component.css
  
  #dialog-box-container {
      height: 12%;
      width: 25%;
      z-index: 2 !important;
      position: absolute;
      background-color: lightgrey;
      right: 50%;
      bottom: 50%;
      transform: translate(45%,-50.1%);
      -moz-box-shadow: 8px 8px 8px #d9d9d9;
      -webkit-box-shadow: 8px 8px 8px #d9d9d9;
      box-shadow: 8px 8px 8px #d9d9d9; 
  }
  
  #header {
      border: 0.5px solid dimgrey;
      border-bottom: none;
      height: 20%;
  }
  
  #content {
      border: 0.5px solid dimgrey;
      border-bottom: none;
      height: 50%;
  }
  
  #footer {
      border: 0.5px solid dimgrey;
      height: 26%;
  }
  </code></pre>
  
  <p>You can see that it's just a template at the moment, a div that appears onto of all other page content, has a shadow and is centered in the page.</p>
  
  <p>Want I want now is to implement a feature whereby when the user clicks and drags on the <code>header</code> div of the dialog box, the entire dialog box is moved around the page.</p>
  
  <p>I have taken a look at a few questions posted previously:
  <a href="https://stackoverflow.com/questions/5252864/using-js-to-move-a-div-around-the-page">Using JS to move a div around the page</a>
  <a href="https://stackoverflow.com/questions/13526712/make-div-draggable-using-css">Make Div Draggable using CSS</a> These suggest pure javascript, or JQuery ways of doing things which I am not sure would mesh well with angular.</p>
  
  <p>How can I enable my component to be dragged around the page?</p>