let dragged;

document.querySelectorAll("[dropable='true']").forEach(e => {
  e.addEventListener("drag", event => {
  }, false);

  e.addEventListener("dragstart", event => {
    dragged = event.target;
  }, false);

  e.addEventListener("dragend", event => {
  }, false);

  e.addEventListener("dragover", event => {
    event.preventDefault();
  }, false);

  e.addEventListener("dragenter", event => {
    event.target.style.opacity = "0.4";
  }, false);

  e.addEventListener("dragleave", event => {
    event.target.style.opacity = "";
  }, false);

  e.addEventListener("drop", event => {
    event.preventDefault();
    const tmp = dragged;
    const to = event.target.id.slice(0, 4) !== "main" ? event.target.parentNode : event.target;

    const from = {
      val: tmp
    };

    console.log("from", tmp);
    console.log("to", to);

    event.target.style.opacity = "";
  }, false);
});

export default ({
  createCardEvents: () => {
    document.querySelectorAll(".card_outer[draggable='true']").forEach(card => {
      card.addEventListener("dragstart", event => {
        event.dataTransfer.setData("text/plain", null);
      });
    });
  }
});