drag_and_drop.html

<!DOCTYPE html>
<html>

  <header>
    <title>HTML5 Drag and Drop</title>
  </header>

  <body>

    <h1>HTML5 Drag and Drop</h1>

    <h4>example</h4>

    <script type="text/javascript">
      function allowDrop(ev)
      {
        ev.preventDefault();
      }

      function drag(ev)
      {
        ev.dataTransfer.setData("Text", ev.target.id);
      }

      function drop(ev)
      {
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        ev.preventDefault();
      }
    </script>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <img id="drag1" src="http://www.w3schools.com/html5/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

  </body>
</html>