Move up and Move down items in listbox

I have some items populated in the listbox from the database in my asp.net mvc(C#) application.

I need to give an option to move up/move down the items in the listbox and store it back to the database with the updated order.

I like to use jquery to move up / move down the items in the listbox. Whats the best way/soultion to do it? Or is there any best method to d开发者_C百科o it other than using it with listbox?

---

I don't have the code but there are several examples on the web of moving div's using jQuery.

My suggestion would be to ditch the list box in favour of some moveable divs or something.

Something like this might help you. it uses a list I think and allows you to reorder them. You can then jQuery the new order and store that in the database.

---

You can move the items client side with something like:

            $("#btnMoveSectionUp").click(function (e) {
            var curr = $("#<%= lstEditReportSections.ClientID %> option:selected");
            if (curr.length == 0) return;
            if (curr.index() > 0) {
                var prev = curr.prev();
                curr.insertBefore(prev);
            }
        });
            $("#btnMoveSectionDown").click(function (e) {
            var curr = $("#<%= lstEditReportSections.ClientID %> option:selected");
            if (curr.length == 0) return;
            if (curr.index() < $("#<%= lstEditReportSections.ClientID %> option").length - 1) {
                var next = curr.next();
                curr.insertAfter(next);
            }
        });

But the server will not see the changes made on the client. What I did was use this code to store all the values in a hidden field, then split it on the server side.

            $("#<%= btnSaveReport.ClientID %>").click(function (e) {
            if (confirm("Are you sure you want to save the report?") != true) return false;
            var sections = $("#<%= lstEditReportSections.ClientID %> option").map(function () {
                return $(this).val();
            }).get().join('#');
            $("#<%= hidEditReportSectionsList.ClientID %>").val(sections);
        });

It may not be ideal, but it did the trick for me.