// JavaScript source code
var items = document.querySelectorAll('.item');
var cart = document.getElementById('cartItems');

document.addEventListener('dragstart', function (e) {
  items = e.target;
  e.target.style.opacity = '0.6';  // this / e.target is the source node.
  e.target.dataTransfer.setData('text/html', this.innerHTML);
  e.target.dataTransfer.effectAllowed = "move";
}, false);

document.addEventListener('dragend', function (e) {
  e.target.style.opacity = '';
  e.target.style.fadeOut = 'fast';
}, false);

document.addEventListener('dragover', function (e) {
  e.preventDefault();
  if (e.target.className == 'dropzone') {
    e.target.style.backgroundColor = 'burlywood';
  }
}, false);

document.addEventListener('dragenter', function (e) {
  if(e.target.className == 'dropzone') {
    e.target.style.backgroundColor = 'brown';
  }
}, false);

document.addEventListener("dragleave", function (e) {
  // reset background of potential drop target when the draggable element leaves it
  if (e.target.className == "dropzone") {
    e.target.style.background = "";
  }
}, false);

document.addEventListener("drop", function (e) {
  // prevent default action (open as link for some elements)
  e.preventDefault();
  e.dataTransfer.getData('text/html')
  // move dragged elem to the selected drop target
  if (e.target.className== "dropzone" ) {
    e.target.style.background = "";
    items.parentNode.removeChild(items);
    e.target.appendChild(items);
  }
}, false);