Code Online - الباشمبرمج

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Drag And Drop between 2 frames!</title>
    <style>
      .contentBox, .contentBox_second {
          max-width: 300px;
          height: 200px;
          border: 5px dashed gray;
          background: #ffffda;
          text-align: center;
          margin: 20px 0;
          color: #4b4b4b;
          padding: 10px;
          overflow: hidden;
      }
      
      .contentBox p, .contentBox_second p {
          position: absolute;
          left: 33px;
          font-size: 20px;
          font-weight: bold;
      }
      
      .contentBox img, .contentBox_second img {
          position: relative;
          z-index: 1;
          width: 100%;
          height: 100%;
      }
    </style>
</head>
 
<body>
    <h2>Drag And Drop between frames!</h2>
 
    <div id="first_contentBox" class="contentBox" ondrop="drop(event);" ondragover="drag(event);">
       <p>Drop image here!</p>
 
       <img src="https://www.albashmoparmeg.com/images/desktop_prog.jpg" id="first_drag" draggable="true" ondragstart="dragStart(event);" width="200" height="200" alt="Setup Image">
 
       
 
   </div>
 
   <div id="second_contentBox" class="contentBox_second" ondrop="drop(event);" ondragover="drag(event);">
       <p>Drop image here!</p>
 
       
        
   </div>
 
   <script>
       function dragStart(ev) {
           // Sets the value and type of the dragged data
           ev.dataTransfer.setData("Text", ev.target.getAttribute("id"));
       }
 
       function drag(ev) {
           // Prevent the browser default handling of the data
           ev.preventDefault();
       }
 
       function drop(ev) {
           // Cancel this event for everyone else
           ev.stopPropagation();
           ev.preventDefault();
 
           // Retrieve the dragged data by type
           var data = ev.dataTransfer.getData("Text");
 
           // Append image to the drop box
           ev.target.appendChild(document.getElementById(data));
       }
   </script>
</body>
 
</html>