000

td
{
 width: 10em;
 text-align: center;
}

table.mytable {
	list-style-type: none;
	padding: 4px 4px 0 4px;
	margin: 0px;
	font-size: 13px;
	font-family: Arial, sans-serif;
}

table.mytable tr {
	margin-bottom: 4px;
	padding: 2px 2px;
	border: 1px solid #c00;
	background-color: #eee;
}

div.draggable {
  cursor:move;
  padding:2px;
  background-color: #BBCCDD;
}

div.dropsite {
  padding:2px;
  background-color: #DDBB99;
}

div.hoverclass123
{
	border:1px solid red;
}

</style>

Position.includeScrollOffsets = true;

function debug(text)
{
   document.getElementById('debug').innerHTML
       = "<pre>" + text + "</pre>";
}

function add_divs(table, tag, classname)
{
	var items = table.getElementsByTagName(tag);
	for (var i = 0; i < items.length; i++)
		items[i].innerHTML =
			"<div class='" + classname + "'>" + items[i].innerHTML + "</div>";
}

</script>
</head>
<body>

<p>Drag from this table:</p>
<DIV STYLE="padding-left: 50pt;">
<DIV STYLE="overflow: auto; width: 250; height: 100;
            border: 1px gray solid;
            padding:0px; margin: 0px;">
<table id="t1" class="sortable mytable">
    <tr><td>one</td><td>1</td><td>uno</td></tr>
    <tr><td>two</td><td>2</td><td>dos</td></tr>
    <tr><td>three</td><td>3</td><td>tres</td></tr>
    <tr><td>four</td><td>4</td><td>quatro</td></tr>
    <tr><td>five</td><td>5</td><td>cinco</td></tr>
    <tr><td>six</td><td>6</td><td>seis</td></tr>
    <tr><td>seven</td><td>7</td><td>siete</td></tr>
    <tr><td>eight</td><td>8</td><td>ocho</td></tr>
    <tr><td>nine</td><td>9</td><td>nueve</td></tr>
    <tr><td>ten</td><td>10</td><td>diez</td></tr>
</table>
</DIV>
</DIV>
<p>
<p>Drop on this table:</p>
<DIV STYLE="padding-left: 50pt;">
<DIV STYLE="overflow: auto; width: 250; height: 100;
            border: 1px gray solid;
            padding:0px; margin: 0px;">
<table id="t2" class="sortable mytable">
    <tr><td>eleven</td><td>11</td><td>once</td></tr>
    <tr><td>twelve</td><td>12</td><td>doce</td></tr>
    <tr><td>thirteen</td><td>13</td><td>trece</td></tr>
    <tr><td>fourteen</td><td>14</td><td>catorce</td></tr>
    <tr><td>fifteen</td><td>15</td><td>quince</td></tr>
    <tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr>
    <tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr>
    <tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr>
    <tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr>
    <tr><td>twenty</td><td>20</td><td>veinte</td></tr>
</table>
</DIV>
</DIV>
<p>
<div id="debug"></div>
</p>
</body>
</html>