Using jQuery to reorder a list

I'm attempting to use the List Reorder from here: http://www.utdallas.edu/~jrb048000/ListReorder/

I've got all the scripts in place, and my events are firing properly on dragging/dropping, but I'm unable to see anything in my object.

The goal is to reorder the list, and save the new order back to the DB. I am assuming something is wrong with my syntax in the lists.bind, as it shows the actual items in the list, but the values are empty.

            $(document).ready(function () {
            var options = {
                itemHoverClass: 'itemHover',
                dragTargetClass: 'dragTarget',
                dropTargetClass: 'dropTarget',
                useDefaultDragHandle: true
            };

            var lists = $('.lists').ListReorder(options);
            var items = [];
            lists.bind('listorderchanged', function (evt, jqList, listOrder) {
                for (var i = 0; i < listOrder.length; i++) {
                    items[i] = $("ul li:eq(" + i + ")").attr('id');
                }
            });

            $('#btnSave').click(function () {
                if (items.length > 0) {
                    var jsonText = JSON.stringify({ items: items });
                    $.ajax({
                        type: "POST",
                        url: 'ManageSliders.aspx/SaveReOrder',
                        data: jsonText,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function () { $("#result").html("New order saved successfully"); },
                        failure: function (msg) { alert(msg); }
                    });
                }
                else {
                    alert("You have made no changes");
                }
            });
        });

I'm binding a listview using C# and that is showing up fine as well.

<ul class="lists">
        <asp:ListView ID="lvSliders" runat="server">
            <LayoutTemplate>
                <asp:Panel ID="itemPlaceHolder" runat="server" />
            </LayoutTemplate>
            <ItemTemplate>
                <li id='<%# DataBinder.Eval(Container.DataItem, "Id")%>'>
                    <%# DataBinder.Eval(Container.DataItem, "Title")%></li>
            </ItemTemplate>
            <ItemSeparatorTemplate>
            </ItemSeparatorTemplate>
        </asp:ListView>
    </ul>

I ran it through Fiddler, and it is throwing me this error:

{"Message":"Cannot convert object of type \u0027System.String\u0027 to type \u0027System.Collections.Generic.List1[System.String]\u0027","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Services.WebServiceMethodData.StrongTypeParameters(IDictionary2 rawParams)\r\n at System.Web.Script.Services.WebServiceMethodData.CallMethodFromRawParams(Objec开发者_运维百科t target, IDictionary2 parameters)\r\n at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary2 rawParams)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}

is it a success or a failure. if it is success write a function to refresh the listview using jquery then you will get updated data

check this link for more details

http://marcgrabanski.com/articles/jquery-ajax-content-type

I think you would be a whole lot better off using the jQuery UI sortable...

http://jqueryui.com/demos/sortable/