Cacher is the code snippet organizer for pro developers

<button id="create-element">Create Draggable</button>

<section id="wrapper">
    <!-- Area in which the draggable element get into -->
    <div class="container dropable" dropzone="link">

    </div>

    <!-- Area with draggable items -->
    <div class="container draggable">

    </div>
</section>

(function(){

    //Create global variables
    var createdElements = [];
    var selectedElements = [];
    var current;

    /*
     Set event listener for the button
     if the button is clicked adds an extra object to the createElements array
     */
    _$('#create-element').addEventListener('click', function(evt){
        var buttonObject = {
            "id": createdElements.length,
            "name": "Element " + createdElements.length
        };
        createdElements.push(buttonObject);
        createElement(buttonObject, _$('.draggable')[0]);
    });

    //Set the listeners for the DragDrop Events
    _$('.dropable', true).addEventListener('dragover', function(evt){
        evt.preventDefault();
    });

    _$('.draggable', true).addEventListener('dragstart', function(evt){
        current = evt.target.id.replace("-element", "");
    });

    /*
     Set event listener for the button
     if something falls into, creates a new element and populates the selectedElements array
     */
    _$('.dropable', true).addEventListener('drop', function(evt){
        evt.preventDefault();

        var data = current;
        loadElement(current);

        return false;
    });


    //Alias for the document querySelector
    function _$(selector, first){

        if((selector.indexOf('#') > -1) || first){
            return document.querySelector(selector);
        }
        return document.querySelectorAll(selector);
    }

    //Creates a draggable element
    function createElement(obj, parent){
        var elem = document.createElement('div');
        elem.setAttribute('id', createdElements.length + "-element");
        elem.setAttribute('draggable', "true");

        elem.innerHTML = obj.name || "draggable element";
        parent.appendChild(elem);
    }

    //loads a selected element
    function loadElement(id){
        selectedElements.push(id);
        createElement(createdElements[id - 1], _$('.dropable')[0]);
    }

}());

.transit {
  transition: background-color 300ms ease-in-out;
}

html {
 font-family: sans-serif;
  font-size: 16px;
}
button {
  padding: 1em 2em;
  background-color: lightgray;
  border: 2px solid #b2b2b2;
  font-weight: bold;
  font-size: 120%;

  cursor: pointer;

  @extend .transit;
}
button:hover,
button:active,
button:focus {
  background-color: #a7a7a7;
}

#create-element {

}
#wrapper {
  margin-top: 2em;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 500px;
  width: 100%;

  .container {
    width: 500px;
    height: 100%;

    > div {
      box-sizing: border-box;
      padding: 1.5em .5em;
      width: 100%;
      height: 80px;
      line-height: 36px;
      border-bottom: 2px solid #708b97;
      cursor: pointer;
      @extend .transit;

      &:hover {
        background-color: rgba(0,0,0,.3);
      }
    }

  }

  .draggable {
    background-color: lightblue;
  }
  .dropable {
    background-color: lightpink;
  }
}