title: How to move an element to the mouse position
body: <p>I'm trying to move an element when when the user clicks on the document, however, the element is moving to an offset position.  How do I remove the offset when clicking?  I'm trying to get the element to move to the exact position of the mouse, how do I do this?  Would I need to use the <code>.offset()</code> function?  If so, how would I do that?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>Player Name:  &lt;input type="text" name="name" id="name" /&gt;&lt;br&gt;
  &lt;button name="submt" id="meh"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function(){
      $(this).on("click", function(e){
          var x = e.pageX;
          var y = e.pageY;
          $("#meh").css("marginLeft", x);
          $("#meh").css("marginTop", y);
      })
  })
  </code></pre>