draggable tds

stackoverflow

by J. Jones

HTML

<table>
	<tr>
    	<td id="tblrw1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
        	Some Dummy Text1
        </td>
    </tr>
	<tr>
    	<td  id="tblrw2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
        	Some Dummy Text2        
        </td>
    </tr>
    <tr>
    	<td  id="tblrw3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
        	Some Dummy Text3        
        </td>
    </tr>
    <tr>
    	<td  id="tblrw4" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">
        	Some Dummy Text4        
        </td>
    </tr>
</table>

CSS

td
{
	width:500px;
	height:80px;
	border:1px solid #000;
	margin-bottom:5px;
	padding:8px;
	cursor:default;
}

JavaScript

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
alert("Id "+ev.target.id+" Being drag");
}

function drop(ev)
{
alert("Id "+ev.target.id+" Being dropped");
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}