Cross-Browser, User-Sorted Tables with jQuery
jQuery UI offers a sortable interaction that makes it very simple to make anything (usually a list) sortable (perhaps reorderable is a better term) by the user. Under many circumstances this can be achieved with a single line of JavaScript code (see below). On occassion you may want to allow a user to reorder the contents of a table rather than a list. This also takes only one line of code, except if you want this to work properly in the dreaded IE browser. This post will cover how to fix the rendering issue you get in Internet Explorer when reordering table rows.
Generally speaking, IE has a quirk when rendering tables whereby it will ignore empty table elements (at least that is my experience). This causes an issue because as you reorder a table row using jQuery UI, jQuery will add in a "helper" element into the DOM to show the drop position in the table (you can see this at work on list elements in the sortable demo for placeholders). Since jQuery inserts an empty TR element, IE simply seems to ignore it, meaning the location you are going to drop the element is not obvious to the user.
Thankfully there is a quick fix to this issue (full code example below). You can watch the "change" event that is fired every time the element is dragged and the position in the DOM changes. Since, when specifying a placeholder, we give the placeholder TR a special style class, we can then inject content into that row, ensuring that it renders in IE.
As you can see in the full code below, when I create my sortable (reorderable) table I tell it to add a special class of "ui-state-highlight" to the TR tag for the placeholder (also note, since this is a table and the data can only move up and down, I make it fixed to the y axis). I have also told the change event to call my forceHelper() method when the "change" event is fired. My forceHelper() method only has one line of code, which looks for the special placeholder class and injects a TD tag into it with a non-breaking-space to ensure that IE renders it.
That's all that is needed to force your placeholder to show in IE. Hopefully that saves someone from digging into this issue too much as I had to.
<html>
<head>
<title>Cross-browser, User-sorted Tables with JQuery</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<style type="text/css">
.ui-state-highlight {
height: 1.5em;
line-height: 1.2em;
}
#sortable-users tr {
cursor:default;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
function init() {
$("#sortable-users").sortable({
placeholder: 'ui-state-highlight',
axis: 'y',
change: function(e, ui) {
forceHelper(e,ui);
}
});
$("#sortable-users").disableSelection();
}
function forceHelper(e,ui) {
$(".ui-state-highlight").html("<td colspan='100%'>&nbsp;</td>");
}
$(document).ready(init);
</script>
</head>
<body>
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Twitter Username</th>
</thead>
<tbody id="sortable-users">
<tr>
<td>Brian</td>
<td>Rinaldi</td>
<td>remotesynth</td>
</tr>
<tr>
<td>Ray</td>
<td>Camden</td>
<td>cfjedimaster</td>
</tr>
<tr>
<td>Peter</td>
<td>Bell</td>
<td>peterbell</td>
</tr>
<tr>
<td>Ben</td>
<td>Forta</td>
<td>benforta</td>
</tr>
</tbody>
</table>
</body>
</html>
http://www.aliaspooryorik.com/blog/index.cfm/e/posts.details/post/sorting-table-rows-with-jquery-and-coldfusion-28
