Drag and Drop

by Prasad

HTML

<table id="tbl">
  <tr>
    <td id="tblrw1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeeffect(event)"> Some Dummy Text1 </td>
  </tr>
  <tr>
    <td  id="tblrw2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeeffect(event)"> Some Dummy Text2 </td>
  </tr>
  <tr>
    <td  id="tblrw3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeeffect(event)"> Some Dummy Text3 </td>
  </tr>
  <tr>
    <td  id="tblrw4" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="removeeffect(event)"> 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

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');
		console.log(ev.target);
		$('#'+ev.target.id).css({
		'border':'1px dotted red',
		'opacity':'.1'
		});
	}
}
function removeeffect(ev)
{
	ev.preventDefault();	
	$('#'+ev.target.id).css({
	'border':'1px solid black',
	'opacity':'1'
	});
}
function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}
data=datapre="";
function drop(ev)
{	
	var idtarget=idsource=ids=tempid=tempides=null;
	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).parentNode.innerHTML.replace('\n','').trim();	
		var datare=document.getElementById(data).parentNode.innerHTML.replace('\n','').trim();
		idtarget=ev.target.id;	
		idsource=data;
		ids=idsource;
		idss=idtarget;
		tempid,tempides;
		$('#'+idtarget).attr('id','temp_id');
		$('#'+idsource).attr('id','tempides');
		$('#temp_id').replaceWith(datare);	
		$('#tempides').replaceWith(datapre);
		$('#tempides').attr('id',idss);
		$('#temp_id').attr('id',ids);	
		$('#'+idss).css({
		'border':'1px solid black',
		'opacity':'1'
		});
	}
}