console.clear();

// the IDs are in the global scope so I don't need to define them here, but I've done it anyway, just for clarity
let move = document.getElementById('move'),
    copy = document.getElementById('copy'),
    link = document.getElementById('link'),
    boxes = document.querySelectorAll('.box'),
    dropzones = document.querySelectorAll('.dropzone'),
    dropzone = document.getElementById('dropzone'),
    dropzone2 = document.getElementById('dropzone2'),
    dropzone3 = document.getElementById('dropzone3');

for (i of boxes) {
  i.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
  });
}

for (i of dropzones) {
  i.addEventListener('dragover', function(e) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = e.dataTransfer.getData('text/plain');
    e.target.classList.add('droppable');
    // below log is determined by the type of
    // drag initated by the user
    console.log(e.dataTransfer.dropEffect);
  });
}

dropzone.addEventListener('drop', function (e) {
  e.preventDefault();
  if (e.dataTransfer.getData('text/plain') === 'move') {
    e.target.appendChild(move);
    move.draggable = false;
  }
});

dropzone2.addEventListener('drop', function (e) {
  e.preventDefault();
  if (e.dataTransfer.getData('text/plain') === 'copy') {
    e.target.appendChild(copy.cloneNode(true));
    copy.draggable = false;
  }
});

dropzone3.addEventListener('drop', function (e) {
  e.preventDefault();
  if (e.dataTransfer.getData('text/plain') === 'link') {
    e.target.appendChild(link.cloneNode(true));
    link.draggable = false;
  }
});

for (i of boxes) {
  i.addEventListener('dragend', function(e) {
    for (j of dropzones) {
      j.classList.remove('droppable');
    }
    for (k of document.querySelectorAll('.box')) {
      k.classList.remove('droppable');
    }
  });
}