Allow repeater to be arranged using drag-drop

Question

Hey all,

I have a repeater that's bound to a SQL Data Source (using ASP.NET). Are there any 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

Answer 1

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

Answer 2

See http://stackoverflow.com/questions/1791103/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 :)