var dragSrcEl = null;

function allowDrop(ev) {

    ev.preventDefault();

}

​

function drag(ev) {

    ev.dataTransfer.setData("Text", ev.target.id);

    var id=ev.target.id;

    dragSrcEl = this;

}

​

function drop(ev) {

    ev.preventDefault();

    var data = ev.dataTransfer.getData("Text");

    var cpydata = document.getElementById(data);

    cpydataElement = cpydata.cloneNode(true);

    var columnId = document.getElementById("column");

    cpydata.removeAttribute("id"); 

    ev.target.appendChild(cpydata);

    columnId.innerHTML = columnId.innerHTML + cpydataElement.outerHTML ; 

}

​

function handleDragEnter(e) {

  this.classList.add('over');

}

​

function handleDragLeave(e) {

  this.classList.remove('over');  

}

​

function handleDragOver(e) {

  if (e.preventDefault) {

    e.preventDefault(); 

  }

  e.dataTransfer.dropEffect = 'move';  

  return false;

}

​

var cols = document.querySelectorAll('#column .test');

[].forEach.call(cols, function(col) {

  col.addEventListener('dragstart', drag, false);

  col.addEventListener('dragenter', handleDragEnter, false);

  col.addEventListener('dragover', handleDragOver, false);

  col.addEventListener('dragleave', handleDragLeave, false);

});