Drag & Drop ADDDDD

In this example below you will see how to do a Drag & Drop ADDDDD with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -_-Nina-_-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -_-Nina-_- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Drag & Drop ADDDDD</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Amita' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Bubbler One' rel='stylesheet'>


<body>
  <center>
  <h1>Match the correct anime to its name</h1>
  </center>
  
  <h3>Naruto</h3>
  <div id="div1" class="floating-box" ondrop="drop(event)" ondragover="allowDrop(event)">
    <style>
      #div1 img {
        margin-left:50px;  
      }
    </style>
  </div>
 
    <div id="div2" class="floating-box" ondrop="drop(event)" ondragover="allowDrop(event)">
      
      <img id="drag1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/dragon%20ball.jpg" draggable="true" ondragstart="drag(event)" width="200px" height="150px">
      
      <id="drag1" draggable="true">
      
        <style>
      #div4 img {
        margin-left:50px;  
      }
    
    </style>
        
    </div>  
    <h3>One Piece</h3>
    <div id="div3" class="floating-box" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
   
    <div id="div4" class="floating-box" ondrop="drop(event)" ondragover="allowDrop(event)">
      
      <img id="drag2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/naruuutooooo%20lol%3F.jpg" draggable="true" ondragstart="drag(event)" width="100px" height="150px">
      
      <id="drag2" draggable="true">
    </div>
      
    <h3>Dragon Ball</h3>
    <div id="div5" class="floating-box" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    
    <div id="div6" class="floating-box" ondrop="drop(event)" ondragover="allowDrop(event)">
      
      <img id="drag3" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/terman%3F.jpg" draggable="true" ondragstart="drag(event)" width="200px" height="150px">
      
      <id="drag3" draggable="true">
    </div>

    <h3>Not an anime</h3>
    <div id="div7" class="floating-box" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    
    <div id="div8" class="floating-box" ondrop="drop(event)" ondragover="allowDrop(event)">
      
      <img id="drag4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/one%20piece.jpg" draggable="true" ondragstart="drag(event)" width="200px" height="150px">
      
      <id="drag4" draggable="true">
      
    </div>   
    
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-_-Nina-_-/drag-andamp-drop-addddd-OOdLQr */
#div1 {
  margin-left:690px;
  position:absolute;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div2 {
  margin-left:990px;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div3 {
  margin-left:690px;
  position:absolute;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div4 {
  margin-left:990px;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div5 {
  margin-left:690px;
  position:absolute;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div6 {
  margin-left:990px;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div7 {
  margin-left:690px;
  position:absolute;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

#div8 {
  margin-left:990px;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

h1 {
  font-family:Amita;
}

h3 {
  font-family:Bubbler One;
  margin-left:690px;
}

/*Downloaded from https://www.codeseek.co/-_-Nina-_-/drag-andamp-drop-addddd-OOdLQr */
function allowDrop(ev) {
  ev.preventDefault();
}

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

Comments