title: How to drag and drop a div changing the css left and top attributes in HTML 5?
body: <p>I would like to perform a drag and drop on a div in HTML 5. The goal is to move a div anywhere in the main container. </p>
  
  <p>Here is my html code : </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Mon document&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
      &lt;script type="text/javascript" src="dragndrop.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);"&gt;
      &lt;div class="box" draggable="true"&gt;
          Drag me if you can !
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>The style.css : </p>
  
  <pre><code>.box {
        position: absolute;
        top: 100px;
        left: 400px;
        color: white;
        background-color: #6495ED;
        border: 10px solid #6495ED;
        -webkit-box-shadow: 4px 4px 6px #999; 
        box-shadow: 4px 4px 12px #555;
        border-radius: 7px; 
        width: 150px;
        height: 150px;
  }
  
  body {
        background-color:#EEEEEE;
  }
  </code></pre>
  
  <p>And the javascript : </p>
  
  <pre><code>var mouseX;                         // Current mouse X           coordinate
  var mouseY;                         // Current mouse Y  coordinate
  
  document.onmousemove = mouseMove;
  
  function dragStart(event) {
  event.dataTransfer.effectAllowed = 'move';
  event.dataTransfer.setData("Text", event.target.getAttribute('id'));
  }
  
  function dragOver(event) {
  return false;
  }
  
  function drop(event) {
  ev = event || window.event;
  mouseX = ev.pageX;
  mouseY = ev.pageY;
  
  var element = event.dataTransfer.getData("Text");
  
  document.getElementById(element).style.left = mouseX+"px";
  document.getElementById(element).style.top = mouseY+"px";
  
  event.stopPropagation();
  
  return false;
  } 
  </code></pre>
  
  <p>It does not work, so I think there is something wrong in the javascript function drop. But I can not see what (I never worked with js before that).</p>
  
  <p>Thanks for help.</p>