jquery ui可选择和可排序组合

Question

这就是我得到的:
http://jsfiddle.net/hashie5/vk6rZ/
(不介意布局)

第一个表是第二个和第三个表的组合,这是需要完成的表.

秒表可以排序(带箭头).

第三个表可选(不要单击箭头).

目标是:当您选择多个项目时,您应该能够同时对它们进行排序.

如果由于表格而变硬,那么列表的例子也会很棒.

在辅助函数中,我尝试克隆所有选定的(ui选择的类)项,但这太麻烦了

编辑:
我创建了一个新的小提琴: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. 从第1个表中选择多个项目;
2. 通过悬停其中一个选定的项目;
3. 您可以在列表中的任何位置移动所选的那些;
4. 保留所有选定项目的排序顺序;

希望这就是你要找的东西.