Getting JQuery UI Sortable to work on asp.net ListView items?

Question

I have the following ListView in which I am using the JQuery UI sortable function to be able to sort the items in the ListView. The problem is that I can't put a sortable class on the table in the ItemTemplate because it does not work, if I put a class="sortable" on the outer div, it works, but it allows me to sort everything within the ListView, I just want to be able to move sort the tables. Here is the markup

  <div>  //Works here, but hr's become sortable too.
            <asp:ListView ID="lvwDocuments" runat="server">
                <LayoutTemplate>
                    <h3>
                        Documents</h3>
                        <asp:PlaceHolder ID="itemPlaceHolder" runat="server">
                        </asp:PlaceHolder>
                </LayoutTemplate>
                <ItemTemplate>
                    <table class="sortable"> //Does not work Here
                        <tr>
                            <td>
                                <p class="title">
                                    <a runat="server" href='<%#Eval("url") %>'>
                                        <%#Eval("title") %></a></p>
                                <br />
                                <p>
                                    <%#Eval("description") %></p>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
                <ItemSeparatorTemplate>
                    <hr />
                </ItemSeparatorTemplate> 
        </div>

Also, How can I preserve the sort order even after the page is refreshed.

Answer 1

In order for sortable to work, you must apply it to the parent element (usually a div).

In the sortable call use the following properties:

$(".sortable").sortable({ items: "table" });

Sort order can be preserved by using a HiddenField and assigning its value to:

$(".sortable").sortable("toArray");

Then using this value to order your listview.

There is a problem with this approach though. The HR's aren't sortable, thus you can't place items in between them. It would be better to use a dive around your table that had an hr at the bottom.

<div class="sortable">
    <div class="item">
        <table> ... </table>
        <hr />
    </div>
</div>