Allow repeater to be arranged using drag-drop

I have a repeater that's bound to a SQL Data Source (using ASP.NET). Are there an开发者_StackOverflowy JQuery plugins/efficient way of converting my repeater into something that can be sorted via drag and drop? i.e. users can rearrange the order of the data, which updates the database?

Thanks

Yes, use jQuery UI sortable plugin like so

    <script type="text/javascript">
$(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
});
</script>

Here is what the repeater markup would look like

 <asp:Repeater ID="LstSortable" runat="server">
        <HeaderTemplate>
            <ul id="sortable">
        </HeaderTemplate>
        <ItemTemplate>
            <li class="ui-state-default">
                <%=Eval("Blah") %>
            </li>
        </ItemTemplate>
        <FooterTemplate>
            </ul>
        </FooterTemplate>
    </asp:Repeater>

You can see a live demo and download it at jqueryui.com

See Drag-and-drop accordion panels? (ASP.Net) it is related.

Basically, you use something like @Banzor's solution and then using something like

$('#myrepeater').sortable( 'serialize');

and you stick those results in a hidden field whenever a postback happens. Then, you just look at the hidden field in ASP.Net and parse it as appropriate. It's easier to do than I can explain really :)