Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Complete Example of Tracking Start and End of Drag Operations with jQuery and Table Rows

DZone's Guide to

Complete Example of Tracking Start and End of Drag Operations with jQuery and Table Rows

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

After writing my previous post about “Keeping track of indexes while dragging in jQuery UI Sortable” I received a question about how this would work for sortable table rows. The code I included in the previous post should actually be enough to make everything work (.. as long as I understood the question correctly). I’ve created a minimal example as a complete implementation of the code from the previous post, and I’ve also included it as a live demo here.

This is based on jQuery 1.5.1 and jQuery UI 1.8.13. I’ve simply used the distribution versions of this example (you probably want to build your own UI bundle using the interface on the jQuery UI website).

Here’s a live demo that you can play with.

Inline javascript and WordPress could possibly be better friends.

The complete source for the minimal (but complete) example is included here:

      <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$("tbody").sortable({
start: function(event, ui) {
ui.item.data('originIndex', ui.item.index());
$("#draggingFrom").text("Index: " + ui.item.index());
},
change: function (event, ui) {
var originIndex = ui.item.data('originIndex');
var currentIndex = ui.placeholder.index();

if (currentIndex > originIndex)
{
currentIndex -= 1;
}
$("#hoveringOver").text("Current Index: " + currentIndex);
},
stop: function (event, ui) {
$("#draggingFrom, #hoveringOver").text("None");
}
});
});
</script>
<style type="text/css">
td
{
border: 1px solid #888888;
background: #eeeeee;
padding: 4px;
}
</style>
</head>
<body>
<dl>
<dt>
Dragging from index

</dt>
<dd id="draggingFrom">
None
</dd>
<dt>
Hovering index
</dt>
<dd id="hoveringOver">
None
</dd>
</dl>

<table>
<thead>
<tr>
<th>
Keys
</th>
<th>
Values
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Key 1
</td>
<td>
Value 1
</td>
</tr>
<tr>
<td>
Key 2
</td>
<td>
Value 2
</td>
</tr>
<tr>
<td>
Key 3
</td>
<td>
Value 3
</td>
</tr>
<tr>
<td>
Key 4
</td>
<td>
Value 4
</td>
</tr>
<tr>
<td>
Key 5
</td>
<td>
Value 5
</td>
</tr>
<tr>
<td>
Key 6
</td>
<td>
Value 6
</td>
</tr>
</tbody>
</table>
</body>
</html>

From http://e-mats.org/2011/06/complete-example-of-tracking-start-and-end-of-drag-operations-with-jquery-and-table-rows/

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}