title: JavaScript How to Dynamically Move Div by Clicking and Dragging
body: <p>Okay it would seem like it should be simple. I need to take an already existing div and move it according to mouse position within the window. I have searched everywhere and it has led me to over-complicated ways of doing the same thing and involves the use of j-query. I need to strictly use javascript for what I am trying to do.</p>
  
  <p><strong>Method :</strong></p>
  
  <pre><code>var mousePosition;
  var div;
  
  (function createDiv(){
  
      div = document.createElement("div");
      div.style.position = "absolute";
      div.style.left = "0px";
      div.style.top = "0px";
      div.style.width = "100px";
      div.style.height = "100px";
      div.style.background = "red";
      div.style.color = "blue";
  
      div.addEventListener('mousedown', handleKeyPressed, true);
  
      document.body.appendChild(div);
  
  
  })();
  
  function handleKeyPressed(event) {
  
      event.preventDefault();
  
      mousePosition = {
  
          x : event.clientX,
          y : event.clientY
  
      };
  
      div.style.left = mousePosition.x;
      div.style.top = mousePosition.y;
  
      //alert("whoa!");
  
  }
  </code></pre>