JSFiddle - React, Tailwind, and code Playground

by Milomir Topic

HTML

<table class="table table-bordered">
	<thead>
		<tr>
			<th draggable="true">Last Name</th>
			<th draggable="true">First Name</th>
			<th draggable="true">Nickname</th>
			<th draggable="true">Partner</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Stark</td>
			<td>Tony</td>
			<td>Iron Man</td>
			<td>James Rhodes</td>
		</tr>
		<tr>
			<td>Wayne</td>
			<td>Bruce</td>
			<td>Batman</td>
			<td>Robin</td>
		</tr>
		<tr>
			<td>Lang</td>
			<td>Scott</td>
			<td>Ant-Man</td>
			<td>The wasp</td>
		</tr>
		<tr>
			<td>Raccon</td>
			<td>Rocket</td>
			<td>Rocket</td>
			<td>Groot</td>
		</tr>
	</tbody>
</table>

CSS

table {
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
		}

		.jsdragtable-contents {
			background: #fff;
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			box-shadow: 2px 2px 5px #aaa;
			padding: 0;
		}

		.jsdragtable-contents table {
			margin-bottom: 0;
		}
		
		.table {
			width: 100%;
			max-width: 100%;
			margin-bottom: 20px;
		}
		
		tbody>tr>td,thead>tr>th {
			padding: 8px;
			line-height: 1.42857143;
			vertical-align: top;
			border-top: 1px solid #ddd
		}

		thead>tr>th {
			vertical-align: bottom;
			border-bottom: 2px solid #ddd
		}

		
		.table-bordered {
			border: 1px solid #ddd;
		}
		
		.table-bordered>tbody>tr>td,.table-bordered>thead>tr>th {
			border: 1px solid #ddd
		}

		.table-bordered>thead>tr>th {
			border-bottom-width: 2px;
			background-color: yellow;
		}

		.table-hover>tbody>tr:hover {
			background-color: #f5f5f5
		}
				
		.table-bordered>thead>tr>th.over {
			border: 2px dashed #000;
		}
		
		[draggable] {
		  -moz-user-select: none;
		  -khtml-user-select: none;
		  -webkit-user-select: none;
		  user-select: none;
		  /* Required to make elements draggable in old WebKit */
		  -khtml-user-drag: element;
		  -webkit-user-drag: element;
		}
		
		th{
			cursor:move;
		}

JavaScript

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
function listenerDragStart(e) {
	e.dataTransfer.effectAllowed = 'move';
	e.dataTransfer.setData('text', $(this).text());

	if (!isIE11) {
		//Create column's container
		var dragGhost = document.createElement("table");
		dragGhost.classList.add("tableGhost");
		dragGhost.classList.add("table-bordered");
		//in order tor etrieve the column's original width
		var srcStyle = document.defaultView.getComputedStyle(this);
		dragGhost.style.width = srcStyle.getPropertyValue("width");
		
		//Create head's clone
		var theadGhost = document.createElement("thead");
		var thisGhost = this.cloneNode(true);
		thisGhost.style.backgroundColor = "red";
		theadGhost.appendChild(thisGhost);
		dragGhost.appendChild(theadGhost);

		var srcTxt = $(this).text();
		var srcIndex = $("th:contains(" + srcTxt + ")").index() + 1;
		//Create body's clone
		var tbodyGhist = document.createElement("tbody");
		$.each($('.table tr td:nth-child(' + srcIndex + ')'), function (i, val) {
			var currentTR = document.createElement("tr");
			var currentTD = document.createElement("td");
			currentTD.innerText = $(this).text();
			currentTR.appendChild(currentTD);
			tbodyGhist.appendChild(currentTR);
		});
		dragGhost.appendChild(tbodyGhist);
		
		//Hide ghost
		dragGhost.style.position = "absolute";
		dragGhost.style.top = "-1500px";
		
		document.body.appendChild(dragGhost);
		e.dataTransfer.setDragImage(dragGhost, 0, 0);
	}
}

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

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

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

function listenerDrop(e) {
	if (e.preventDefault) {
		e.preventDefault();
	}
	if (e.stopPropagation) {
		e.stopPropagation();
	}

	var srcTxt = e.dataTransfer.getData('text');
	var destTxt = $(this).text();
	if (srcTxt != destTxt) {
		var...