JSFiddle - React, Tailwind, and code Playground

HTML

<div class="containter">
	<div id="columns">
	<!--<div class="column" draggable="true"><span>A</span></div>-->	
		
	</div>
	</div>

CSS

body{
	font-family:verdana;
}
[draggable]{
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.column{
	height: 100px;
	width: 100px;
	float:left;
	border: 1px solid #000000;
	background-color: #fff;
	margin-right: 10px;
	border-radius: 10px;
	box-shadow: inset 0 0 3px #000;
	text-align: center;
	cursor: pointer;
}
.column span {
	font-size:70px;
	color: #ccc;
	text-shadow: #000 0 1px;
	box-shadow: 5px;
	padding: 5px;
	
}
.column.over {
  border: 2px dashed #000;
}

JavaScript

window.onload = init;
var cols = document.querySelectorAll('#columns .column');
var colDiv;
var dragSrcEl = null;
/*
<div id="columns">
		
		<div class="column" draggable="true"><span>B</span></div>
		<div class="column" draggable="true"><span>C</span></div>
*/
function init(){
	
	colDiv = document.getElementById('columns');
    //I want to make this working :)
	var divC = document.createElement("div");
	divC.className = "column";
	divC.draggable = "true";
	var spanC = document.createElement("span");
	spanC.appendChild(document.createTextNode("A"));
	divC.appendChild(spanC);
	colDiv.appendChild(divC);
}

function handleDragStart(e){
	this.style.opacity = 0.4;
	dragSrcEl = this;
	e.dataTransfer.effectAllowed = 'move';
	e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOver(e){
	if(e.preventDefault){
		e.preventDefault();
	}
	e.dataTransfer.dropEffect = 'move';
	
	return false;
}

function handleDragEnter(e){
	this.classList.add('over');
}

function handleDragLeave(e){
	this.classList.remove('over');
}

function handleDrop(e){
	if(e.stopPropagation){
		e.stopPropagation();
	}
		
	if(dragSrcEl != this){
		dragSrcEl.innerHTML = this.innerHTML;
		this.innerHTML = e.dataTransfer.getData('text/html');
	}
	return false;
}

function handleDragEnd(e){
	this.style.opacity = 1;
	[].forEach.call(cols, function(col){
		col.classList.remove('over');
	});
	
}		

[].forEach.call(cols, function(col){
	col.addEventListener('dragstart', handleDragStart,false);
	col.addEventListener('dragenter', handleDragEnter,false);
	col.addEventListener('dragover', handleDragOver,false);
	col.addEventListener('dragleave', handleDragLeave,false);
	col.addEventListener('drop', handleDrop, false);
	col.addEventListener('dragend', handleDragEnd, false);
});