I want to reorder the rows by dragging them which is accomplished by the code below, but the void (placeholder) should be of a red color while the drag is taking place - this part is not happening :
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.sortable.min.js"></script>
<script>
$(function() {
$( "#table tbody" ).sortable({placeholder:'red'});
$( "#table" ).disableSelection();
});
</script>
<style>
.red{
background-color : red;height: 1.5em; line-height: 1.2em;
}
</style>
</head>
<body>
<table id="table"><tbody>
<tr>
<td>
<label for="name1">Enter name</label>
<input type="text" id="name1"/>
</td>
</tr>
<tr>
<td>
<label for="name2">Enter name</label>
<input type="text" id="name2"/>
</td>
</tr>
<tr>
<td>
<label for="name3">Enter name</label>
<input type="text" id="name2"/>
</td>
</tr>
</tbody>
</table>
<!--
<ul id="table">
<li>
<label for="name1">Enter name</label>
<input type="text" id="name1"/>
</li>
<li>
<label for="name2">Enter name</label>
<input type="text" id="name2"/>
</li>
</ul>-->
</body>
</html>Further, if I use list instead of tables (the commented part in the above code) and apply sortable on "#table", the placeholder is showing red, but when the swap has taken place and I haven't lifted my finger off the mouse button yet, the red placeholder is transferred to the new position as background. Is that expected behaviour ?