<section id="container" ondrop="drop(event)" ondragover="allowDrop(event)">
  <div class="padre">
     <div class="tipo" id="fuego" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
     <div class="tipo" id="agua" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  </div>
  <img class="pokemon" src="http://i65.tinypic.com/j0itlk.png" draggable="true" ondragstart="drag(event)" id="drag1"/>
  <img class="pokemon" src="http://i65.tinypic.com/214vxts.png" draggable="true" ondragstart="drag(event)" id="drag2"/>
  <img class="pokemon" src="http://i66.tinypic.com/ckf41.jpg" draggable="true" ondragstart="drag(event)" id="drag3"/>
  <img class="pokemon" src="http://i66.tinypic.com/2nq5pp3.png" draggable="true" ondragstart="drag(event)" id="drag4"/>
</section>
<div id="resultado">...</div>
#container {
  width: 580px;
  height: 250px;
  margin: 0 auto;
  border: 1px solid black;
  text-align: center;
}
.padre {  
  width: 580px;
  height: 120px;
  display: flex;
  justify-content: space-between;
}
.tipo {
 flex-grow: 1;
}
#fuego {
 background-color: #ffd54c;
}
#agua {
  background-color: #42ccff;
}
#resultado {
  text-align: center;
  font-size: 30px;
}
.pokemon {
   margin: 10px;
   height: 80px;
   width: 80px;
}
function drag(ev) {
   ev.dataTransfer.setData("text", ev.target.id);
}

function allowDrop(ev) {
  ev.preventDefault();
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.