Draggable Table Rows (working)
HTML
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li><a href="#current"><span>Current</span></a>
</li>
<li><a href="#archive"><span>Archive</span></a>
</li>
<li><a href="#future"><span>Future</span></a>
</li>
</ul>
<div id="current">
<div id="table1">
<table>
<tbody>
<tr>
<td>COL0</td>
<td>COL1</td>
<td>COL2</td>
</tr>
<tr>
<td>c00</td>
<td>c01</td>
<td>c02</td>
</tr>
<tr>
<td>c10</td>
<td>c11</td>
<td>c12</td>
</tr>
<tr>
<td>c20</td>
<td>c21</td>
<td>c22</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="archive">
<div id="table2">
<table>
<tbody>
<tr>
<td>COL0</td>
<td>COL1</td>
<td>COL2</td>
</tr>
<tr>
<td>a00</td>
<td>a01</td>
<td>a02</td>
</tr>
<tr>
<td>a10</td>
<td>a11</td>
<td>a12</td>
</tr>
<tr>
<td>a20</td>
<td>a21</td>
<td>a22</td>
...
CSS
table {
border-collapse:collapse;
}
table tr td {
border: 1px solid red;
padding:2px 15px 2px 15px;
width:50px;
}
#tabs ul li.drophover {
color:green;
}
}
JavaScript
$("#tabs").tabs();
$("tbody").sortable({
items: "> tr:not(:first)",
appendTo: "parent",
helper: "clone"
}).disableSelection();
$("#tabs ul li a").droppable({
hoverClass: "drophover",
tolerance: "pointer",
drop: function(e, ui) {
alert("dfdsf");
var tabdiv = $(this).attr("href");
$(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");
ui.draggable.remove();
}
});