Drag-n-drop ordering of multi-level table rows

• Project ID:

  753042

• Project Type:

  Fixed

• Budget:

  $30-$250 USD
  

Project Description:

I have a table which looks like this (simplified for the example):

<table>
<tr class="lvl_1">
<td>
Level 1
</td>
</tr>
<tr class="lvl_2">
<td>
Level 2
</td>
</tr>
<tr class="lvl_3">
<td>
Level 3
</td>
</tr>
<tr class="lvl_1">
<td>
Level 1
</td>
</tr>
<tr class="lvl_2">
<td>
Level 2
</td>
</tr>
<tr class="lvl_3">
<td>
Level 3
</td>
</tr>
</table>

The content in the rows with the lvl_3 class are children of the previous lvl_2 row, and the lvl_2 rows are children of the previous lvl_1.

Had the data been a list, it would have looked something like this:

Level 1
-- Level 2
---- Level 3
Level 1
-- Level 2
---- Level 3

I'm now looking to implement drag-and-drop sorting functionality, make it possible to rearrange the level 1 and two rows. The tricky part is that once I start moving a row, the corresponding children (and grand-children, if any) should move along with it. Also, it should only be possible to rearrange rows within their parents, if any. Upon reordering, the script should make an AJAX call to a server-side script with the current order of the rows.

Please let me know if you require additional details.

PS. jQuery is preferred as JS framework, if any should be used.

Skills required:

Javascript, jQuery / Prototype