jquery ui selectable and sortable combined

Question

This is what I got:
http://jsfiddle.net/hashie5/vk6rZ/
(don't mind the layout)

The first table is a combination of the second and third table, and it's this one that needs to be finished.

The seconds table has sortable (with the arrows).

The third table has selectable (dont click the arrows).

The goal is: when you select multiple items, you should be able to sort them all at the same time.

If it's to hard because of the tables, an example with lists would be great too.

In the helper function I tried cloning all selected (ui-selected class) items, but that was too buggy

EDIT:
I created a new fiddle: http://jsfiddle.net/hashie5/AZr9Z/
This works nice, but it's not 100% complete yet

Answer 1

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

the main code look like below.

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");
}

​ i'm not sure i understood what you want, anyway what the code actually do is:

1. from the 1st table, select multiple items;
2. by holding hover one of the selected items;
3. you are able to move those selected where ever you want in the list;
4. mantaining the sort order of all selected items;

hope this is what you are looking for.