jQuery ui 列表排序

Question

我需要管理类似于下面给出的链接的项目队列 http://www.codeproject.com/KB/aspnet/NetflixQueue.aspx 我必须使用 jquery 对 UL 的 li 项目进行排序。

它类似于 netflix 队列，用户可以通过拖放来更改项目的顺序，并且我们还需要一个按钮将所选项目移动到列表顶部/列表底部。

一些 jQuery 专家可以帮助解决这个请求吗？ 这是我第一次使用 Jquery，所以如果您需要更多信息，请告诉我。

谢谢， 戈库尔

Answer 1

一个简单的例子，你的 ul 与 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());
        }
    });

});

这是一个演示:http://jsfiddle.net/SXCsh/