jQuery ui list sorting

Question

Hi There, I have a requirement to manage a queue of items similar to the link given below http://www.codeproject.com/KB/aspnet/NetflixQueue.aspx I have to sort the UL's li items using jquery.

Its similar to a netflix queue where the user can change the order of items by drag & drop and also we need to have a button to move the selected item to the top of the list / bottom of the list.

Can some of the jQuery gurus out there can help with this request? This is my first work with Jquery so please let me know if you need more information.

Thanks, Gokul

Answer 1

A simple case, your ul with id sortable:

$(function() {
    var selectedItem = null;
    var isSorting = false;

    $("ul#sortable")
    .sortable({
        start: function() { isSorting = true; }
    })
    .find("li").click(function(e) {
        if (!isSorting) {
            selectedItem = $(e.target).addClass("selected");
            selectedItem.siblings().removeClass("selected");
        }
        else {
            isSorting = false;
        }
    });

    $("button#btn_top").click(function() {
        if (selectedItem != null) {
            selectedItem.prependTo(selectedItem.parent());
        }
    });

    $("button#btn_bottom").click(function() {
        if (selectedItem != null) {
            selectedItem.appendTo(selectedItem.parent());
        }
    });

});

Here's a demo: http://jsfiddle.net/SXCsh/