开发者

jQuery ui list sorting

开发者 https://www.devze.com 2023-01-07 12:18 出处:网络
I have a requirement to manage a queue of items similar to the link given below http://www.codeproject.开发者_JAVA技巧com/KB/aspnet/NetflixQueue.aspx

I have a requirement to manage a queue of items similar to the link given below http://www.codeproject.开发者_JAVA技巧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


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/

0

精彩评论

暂无评论...
验证码 换一张
取 消