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
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"> </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:
hope this is what you are looking for.