jquery ui 可选择和可排序组合

Question

这是我得到的：
http://jsfiddle.net/hashie5/vk6rZ/
（不要介意布局）

第一个表是第二个和第三个表的组合，需要完成的就是这个。

秒表是可排序的（带有箭头）。

第三个表是可选择的（不要点击箭头）。

目标是：当您选择多个项目时，您应该能够同时对它们进行排序。

如果因为表格而变得困难，那么带有列表的示例也很棒。

在辅助函数中，我尝试克隆所有选定的（ui-selected 类）项目，但这太麻烦了

编辑：
我创建了一个新小提琴：http://jsfiddle.net/hashie5/AZr9Z/
这很好用，但还没有 100% 完成

Answer 1

• 演示 http://so.lucafilosofi.com/jquery-ui-selectable-and-sortable-combined/

主要代码如下所示。

sort : function(event, ui) {
    var $helper = $('.ui-sortable-helper'), hTop = $helper.offset().top, hStyle = $helper.attr('style'), hId = $helper.attr('id');
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            if (hId != item.id) {
                var _top = hTop + (26 * i);
                $('#' + item.id).addClass('ui-sortable-helper').attr('style', hStyle).css('top', _top);
            }
        });
    }
},
start : function(event, ui) {
    if (ui.item.hasClass('ui-selected') && $('.ui-selected').length > 1) {
        first_rows = $('.ui-selected').map(function(i, e) {
            var $tr = $(e);
            return {
                tr : $tr.clone(true),
                id : $tr.attr('id')
            };
        }).get();
        $('.ui-selected').addClass('cloned');
    }
    ui.placeholder.html('<td colspan="99">&nbsp;</td>');
},
stop : function(event, ui) {
    if (first_rows.length > 1) {
        $.each(first_rows, function(i, item) {
            $(item.tr).removeAttr('style').insertBefore(ui.item);
        });
        $('.cloned').remove();
        first_rows = {};
    }
    $("#uber tr:even").removeClass("odd even").addClass("even");
    $("#uber tr:odd").removeClass("odd even").addClass("odd");
}

​ 我不确定我是否理解你想要什么，无论如何代码实际做的是：

1. 从第一个表中，选择多个项目；
2. 通过将鼠标悬停在选定项目之一上；
3. 您可以将选择的对象移动到列表中任何您想要的位置；
4. 维护所有选定项目的排序顺序；

希望这就是你要找的。​​p>