<!DOCTYPE HTML>
<html>
<head>
<script>
var drag_fromid = "";
function $(el) { return document.getElementById(el); }
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev,id)
{
drag_fromid = id; // Keep the from ID
// ev.dataTransfer.setData("text", ev.target.id); // targe id
}
function drop(ev)
{
// SWAP content
// Move from: drag_fromid to: ev.target.id
new1 = $(ev.target.id).innerHTML; // Keep target
$(ev.target.id).innerHTML = $(drag_fromid).innerHTML; // Move to target
$(drag_fromid).innerHTML = new1.trim(); // trim() Not alway needed
ev.preventDefault();
drag_fromid = "";
}
// get the content of the table in the current order
function showlist(table1)
{
tablea = $(table1);
totalRows = $(table1).rows.length;
totalCol = 1;
str = "";
for (x = 0; x < totalRows; x++)
{
for (y = 0; y < totalCol; y++)
{
str += tablea.rows[x].cells[y].innerHTML+"<br>";
}
}
$("list").innerHTML = str;
}
</script>
</head>
<body>
<table id="mytable" style="width: 100%; margin-left:400px; width:500px" border="1">
<tr>
<td id="11" draggable="true" ondragstart="drag(event,this.id)" ondrop="drop(event)" ondragover="allowDrop(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Line One</td>
<td> </td>
</tr>
<tr>
<td id="22" draggable="true" ondragstart="drag(event,this.id)" ondrop="drop(event)" ondragover="allowDrop(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Line Two</td>
<td> </td>
</tr>
<tr>
<td id="33" draggable="true" ondragstart="drag(event,this.id)" ondrop="drop(event)" ondragover="allowDrop(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Line Three</td>
<td> </td>
</tr>
</table>
<div id="list"></div>
<div align="center">
<p style="text-align: center; width:300px; border:thin lime solid; cursor:pointer" onclick="showlist('mytable')">Show List</p>
</div>
</body>
</html>