Jquery UI - Selectable - how to select continous line of table cells?

Question

I got Selectable working as far as filtering out the table cells I do not want to select:

http://jsfiddle.net/2F55j/5/

 $(function() {
   $( "table tr" ).selectable(
     {filter: ":not(.belegt)"}
   );
});

Now I would like to only select cells next to each other, that form a continous line. So when there is a filtered out cell in between, the one after it cannot be selected.

On a sidenote: when I select cells in row 1, then select some in row 2, the selected ones in row 1 do not get removed..How to get this to work?

Could you help me please? I have been on this now for hours and it just won't work. Thanks in advance :)

Answer 1

$(function() {
    $( "table tr" ).selectable({
        filter: "td",
        start: function(event, ui){
            $("td.ui-selected").removeClass("ui-selected");    
        },
        stop: function(event, ui){
            var selected = $("td.ui-selected");
            if(selected.hasClass("belegt"))
                selected.removeClass("ui-selected");   
        }    
    });
});