Sorting (rearranging order) of a photo album using jQuery Sortable

I have a photo album gallery within my website and would like to allow users to sort the order of their photos within an album. After looking at very different ways I came across this example http://www.west-wind.com/rick/photoalbum/demoMaui2006/Default.aspx?Admin=true which is exactly what I need.

The photo are stored in the uploads directory and details in the database. The images are displayed using the ListView as shown below:

    <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCoun开发者_Go百科t="15">
        <LayoutTemplate>
            <table id="groupPlaceholderContainer" runat="server" border="0" cellpadding="0" cellspacing="0"
                style="border-collapse: collapse; width: 100%;">
                <tr id="groupPlaceholder" runat="server">
                </tr>
            </table>
        </LayoutTemplate>
        <GroupTemplate>
            <tr id="itemPlaceholderContainer" runat="server">
                <td id="itemPlaceholder" runat="server">
                </td>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "~/uploads/"+Eval("OriginalFilePath") %>'
                rel="example1" Title='<%# Eval("PhotoName") %>'>
                <div>
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/uploads/"+Eval("ThumbFilePath") %>'
                        Width="130" Height="150" BorderStyle="None" />
                     <asp:Label ID="lblPhotoTitle" runat="server" Text='<%# Eval("PhotoName") %>' CssClass="photoTitle" ></asp:Label>
                </div>
            </asp:HyperLink>
        </ItemTemplate>

    </asp:ListView>


    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:fpaConnectionString %>"
        SelectCommand="fpa_SP_view_album_list_by_id" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:QueryStringParameter DefaultValue="" Name="photo_album_id" QueryStringField="AlbumID"
                Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
</div>

I would like to rearrange the order of the photos; change the captions and/or delete the photos just like as in the example.

So could someone please provide the steps that I need to follow in order to achieve the following: - Firstly to display the photos from the Photo table in the database (can use the above listView) - Rearrange the order; change caption and/or delete the photo(s) - Final to update the changes in the Photo table

I am new to programming, especially jQuery so could you kindly provide/explain the steps that I need to follow.

Any help would be much appreciated.

Thanks

you could, if you want, try out jquery UI and the sortable method http://jqueryui.com/demos/sortable/

$("ListViewClientId")
.find("table")
.sortable({
           items:"tr",
           update: function() {
              $("#myHiddenFieldID").val(theNewPositionsArray);
           }
});

To save this stuff is another progress. You should, via asp.net page object register a hiddenField Page.RegisterHiddenField or something like this. With this, you can save data into it, and retriev it if the user clicks the "Save" button and you handle it´s click event.