Cell selection stops when mouse move fast on table

Question

Demo

var flag=false;

$(document).live('mouseup', function () { flag = false; });
var colIndex; var lastRow;
$(document).on('mousedown', '.csstablelisttd', function (e) {
    //This line gets the index of the first clicked row.
    lastRow = $(this).closest("tr")[0].rowIndex;    

    var rowIndex = $(this).closest("tr").index();
    colIndex = $(e.target).closest('td').index();
    $(".csstdhighlight").removeClass("csstdhighlight");
    if (colIndex == 0 || colIndex == 1) //)0 FOR FULL TIME CELL AND 1 FOR TIME SLOT CELL. 
        return;
    if ($('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).hasClass('csstdred') == false)
    {
        $('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight');

        flag = true;
        return false;
    }     
});


document.onmousemove = function () { return false; };

$(".csstablelisttd").live('mouseenter', function (e) {
    // Compares with the last and next row index.
    var currentRow = $(this).closest("tr")[0].rowIndex;
    var currentColoumn = $(e.target).closest('td').index();

    // cross row selection
    if (lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1)
    {
        lastRow = $(this).closest("tr")[0].rowIndex;
    }
    else
    {
        flag = false;
        return;
    }
    // cross cell selection.
    if (colIndex != currentColoumn)
    {
        flag = false;
        return;
    }

    if (flag)
    {
        $('#contentPlaceHolderMain_tableAppointment tr').eq(currentRow).find('td').eq(currentColoumn).addClass('csstdhighlight');
        e.preventDefault();                     
        return false;
    }                          
});

Cell selection stops when I move the cursor fast over the table.
What should I do to prevent the selection from stopping while moving the cursor fast on table cells.
I dont want to change the html of the page.
The problem mostly occurs in IE 7.
I have handled the event mousedown, mouseenter on tr class.

Answer 1

I think the selection logic is incorrectly getting stuck in a flag = false state.

When the mouse moves quickly the lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1 will evaluate to false since the currentRow is not next to the lastRow, therefore flag is set to false (in the else). Then for all subsequent mouseenter events flag will always be false and the highlight class will never get added.

The problem occurs on Chrome also and I assume is far more pronounced on IE7 because the JavaScript engine is so much slower in IE7. I think that the JavaScript is quite complex and also the .live() jQuery function should be avoided since it was removed in jQuery 1.9. .on() (as you already use in another event binding) is the preferred method now.

I have included an alternate approach to highlighting the last table cell of each row if the left mouse button is held down, which is a lot simpler. If I have understood the code correctly, the only functionality missing is checking if a current row is either side of a previous row, as I couldn't see a good reason for this extra checking.

There is still the possibility that if a user is moving the mouse quickly over the rows, I would expect the that some rows miss the mouseenter event as the mouse is too quick. You may be able to use a mousemove event handler on the <table> itself to help address this.

The demo uses jQuery 1.9.1, and I also removed the table height to better demonstrate the code.

JavaScript

// disable text selection
document.onselectstart = function() {
    return false;
}

var $table = $('#contentPlaceHolderMain_tableAppointment');

$table.on('mouseenter', 'td:last-child', function(e) {
    if (e.which === 1) {
        $(this).addClass('csstdhighlight');
    }
}).on('click', function() {
    $table.find('.csstdhighlight').removeClass('csstdhighlight');
});

I'd be happy to explain my example code in more detail if necessary :-)

Note: An answer (https://stackoverflow.com/a/6195715/637889) on jQuery: Detecting pressed mouse button during mousemove event was very helpful when I was looking at this.

Edit: Updated demo based on revised requirements:

JavaScript

// disable text selection
document.onselectstart = function() {
    return false;
}

var $table = $('#contentPlaceHolderMain_tableAppointment');
var startIndex = -1;
var direction = 0;

$table.on('mouseenter', 'td:last-child', function(e) {
    var $this = $(this);
    var rowIndex = $this.parent().index();
    if (direction === 0 && startIndex != -1) {
        direction = rowIndex > startIndex ? 1 : -1;
    }

    if (e.which === 1 && (
        (direction === -1 && rowIndex < startIndex) ||
        (direction === 1 && rowIndex > startIndex))
       ) {
        $(this).addClass('csstdhighlight');
    }
}).on('mousedown', 'td:last-child', function() {
    var $this = $(this);
    startIndex = $this.parent().index();

    $this.addClass('csstdhighlight');
}).on('mouseup', 'td:last-child', function() {
    direction = 0;
    startIndex = -1;
}).on('click', 'td:last-child', function() {
    $table.find('.csstdhighlight').removeClass('csstdhighlight');
});