Drag and Drop Table Column

by Prasad

HTML

<h2>Table Second</h2>
<table id="table2">
<tr id="row1">
	<th id="th1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeeffect(event)">
    	Column First
    </th>
    <th id="th2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeeffect(event)">
    	Column Second
    </th>
    <th id="th3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeeffect(event)">
    	Column Third
    </th>
    <th id="th4" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeeffect(event)">
    	Column Fourth
    </th>
</tr>
<tr id="row2">
    <td id="col1"> Some Dummy Text1 </td>
  
    <td id="col2"> Some Dummy Text2 </td>
  
    <td id="col3"> Some Dummy Text3 </td>
  
    <td id="col4"> Some Dummy Text4 </td>
  </tr>
  <tr id="row4">
    <td id="col5"> Some Dummy Text1 </td>
  
    <td id="col6"> Some Dummy Text2 </td>
  
    <td id="col7"> Some Dummy Text3 </td>
  
    <td id="col8"> Some Dummy Text4 </td>
  </tr>
  <tr id="row3">
    <td id="col9"> Some Dummy Text1 </td>
  
    <td id="col0"> Some Dummy Text2 </td>
  
    <td id="col11"> Some Dummy Text3 </td>
  
    <td id="col12"> Some Dummy Text4 </td>
  </tr>
</table>

CSS

body
{ 	
	margin-top:0px;
	margin-bottom:0px;
}
.wrapper
{
	width:99%;
	margin-left:.5%;
	margin-right:.5%;
	border:1px solid #8C0000;
}
td
{
	width:500px;
	height:80px;
	border:1px solid #000;
	margin-bottom:5px;
	padding:8px;
	cursor:default;
}
th {
	cursor:pointer;
}

JavaScript

// JavaScript Document

$(document).ready(function(){
	
});

function getElementsArray(colID){
		var elements= [];
		var ind=j=0; //initalized to one as we want to skip th > td
		var colIdName=colID;		
		colID=$('#'+colIdName).index();
		j=colID;
		var rowCnt=$('#table2 tr').length;
		$('#table2 tr:not(:first)').each(function(){
			//Push td text and id in element			
			elements[ind]="<td id='"+$('#table2 tr:not(:first):eq('+ind+') td').eq(j).attr('id')+"'>"+$('#table2 tr:not(:first):eq('+ind+') td').eq(j).attr('id')+"</td>";			
			ind++;					
		});		
		elements.push(j); //Index of th ID in table
		elements.push("<th id='"+$('#'+colIdName).attr('id')+"' draggable= 'true' ondragstart='drag(event)' ondrop=drop(event) ondragover=\'   allowDrop(event)' ondragleave='removeeffect(event)'>"+$('#'+colIdName).text()+"</th>"); //Column ID name last element in array		
		return(elements);
		
}
function allowDrop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	if(data=="")
	{
		//if data is empty do not allow to drop
	}
	else
	{
		var oid=$(ev.target).parent().attr('id');
		$('#'+ev.target.id).css({
		'border':'1px dotted red',
		'opacity':'.1'
		});
	}
}
function removeeffect(ev)
{
	ev.preventDefault();	
	$('#'+ev.target.id).css({
	'border':'none',
	'opacity':'1'
	});
}
function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}
data=datapre="";
function drop(ev)
{		
	var idtarget=idsource=ids=tempid=tempides=datapre=datare=elesLen=elesLenTarget=null;
	var sourceColsData=targetColsData=tempColsData=[];
	ev.preventDefault();
	if(data=='')
	{
		//if data is empty drag and drop will not work
	}
	else
	{
		var data=ev.dataTransfer.getData("Text");		
		var datapre=document.getElementById(ev.target.id);	
		//console.log("data: "+data); //dragged column id
		sourceColsData=getElementsArray(data);				
		var datare=document.getElementById(data).parentNode.innerHTML.replace('\n','').trim();
		//console.log("Datere: "+ev.target.id); //on dropped column...