jQuery ui list sorting

Question

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

Simen Echholt · Accepted Answer · 2010-07-12 21:54:39Z

3

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/

edited Jul 12, 2010 at 21:54

answered Jul 12, 2010 at 19:28

Simen Echholt

11.3k2 gold badges36 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gokul Over a year ago

Hi Simen, Thank You very much. Updated a little bit. jsfiddle.net/SXCsh/5 And also thank you for introducing me to jsfiddle. Very helpful.

Collectives™ on Stack Overflow

jQuery ui list sorting

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related