How to reorder table rows (drag-and-drop) along with their sub rows

Question

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>

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.

Is this even possible with the current markup, or do I have to rearrange the code?

Thanks in advance !

Answer 1

I am not clear why you are not using UL LI lists for achieving this. You can i believe use jQuerys some of remove and append functions to easily implement this