drag.html

<!DOCTYPE html>
<html>
 <head> 
   <style>
     .container{
       width:350px;
       height:150px;
       padding:10px;
       border:1px solid #aaaaaa;
     }
   </style>
   <script>
     function allowDrop(ev){
       ev.preventDefault();
     }
     function drag(ev){
       ev.dataTransfer.setData("text/html",ev.target.id);
     }
     function drop(ev){
       ev.preventDefault();
       var data=ev.dataTransfer.getData("text/html");
       ev.target.appendChild(document.getElementById(data));
     }
    </script>
   </head>
   <body>
     <p>Drag vvit logo into the rectangle</p>
     <div id="div1" class="container" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
     <br>
     <img id="drag1" src="vvit.png" alt="vvit.logo" draggable="true" ondragstart="drag(event)"/>
  </body>
</html>