dragEnDrop

/*Downloaded from https://www.codeseek.co/rouws/dragendrop-ZLbvvY */

div {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
    margin: 10px;
}
#groen {
  background-color: lightgreen;
}
#rood {
  background-color: tomato;
}
#groeneAppel {
  position: relative;
  top: 8px;
}
.glow {
  box-shadow: 0 0 10px 5px hsla(60,100%,50%,.8);
}

/*Downloaded from https://www.codeseek.co/rouws/dragendrop-ZLbvvY */
var groenVlak = document.getElementById('groen');
var roodVlak = document.getElementById('rood');
var rodeAppel = document.getElementById('groeneAppel');
var groeneAppel = document.getElementById('rodeAppel');
var dragging;

function allowDrop(ev) {
  ev.preventDefault();
  if ((dragging == "groeneAppel") && (this.id == "groen")) {
    this.classList.add('glow');
  }
  if ((dragging == "rodeAppel") && (this.id == "rood")) {
    this.classList.add('glow');
  }
}

function drag(ev) {
  dragging = this.id;
}

function dragEnd(ev) {
  groenVlak.classList.remove('glow');
  roodVlak.classList.remove('glow');
  dragging = '';
}

function leave(ev) {
  this.classList.remove('glow');
}

function drop(ev) {
  ev.preventDefault();
  if ((dragging == 'rodeAppel') && (this.id == "rood")) {
    var newEl = document.createElement('img');
    newEl.setAttribute('src', 'http://www.clker.com/cliparts/5/f/8/U/A/d/red-glossy-apple-md.png');
    newEl.setAttribute('width', 50);
    ev.target.appendChild(newEl);
  } else if ((dragging == 'groeneAppel') && (this.id == "groen")) {
    var newEl = document.createElement('img');
    newEl.setAttribute('src', 'http://www.i2clipart.com/cliparts/b/8/d/1/clipart-photorealistic-green-apple-b8d1.png');
    newEl.setAttribute('width', 55);
    ev.target.appendChild(newEl);
  }
}

groenVlak.addEventListener('drop', drop);
groenVlak.addEventListener('dragover', allowDrop);
groenVlak.addEventListener('dragleave', leave);

roodVlak.addEventListener('drop', drop);
roodVlak.addEventListener('dragover', allowDrop);
roodVlak.addEventListener('dragleave', leave);

rodeAppel.addEventListener('dragstart', drag);
rodeAppel.addEventListener('dragend', dragEnd);

groeneAppel.addEventListener('dragstart', drag);
groeneAppel.addEventListener('dragend', dragEnd);