Javascript OnMouseDown / OnMouseUp works only first time

Question

I have a table and in every cell there is OnMouseDown event and OnMouseUp event. I click the first cell then I drag mouse to the other cell and when I stop holding the mouse, it gets the details from both the starting cell and the ending cell so I can create range from those two numbers.

Problem is it only works the first time. When I do it second time and the same cell range it shows me Error cursor. But when I click somewhere else it behaves like it resets the onMouseDown event and I can do it again.

Example Code:

Every cell looks like this:

<td id='20' onmousedown='OnMouseDownStart(this.id)' onmouseup='OnMouseDownEnd(this.id)'></td>

<td id='21' onmousedown='OnMouseDownStart(this.id)' onmouseup='OnMouseDownEnd(this.id)'></td>

function OnMouseDownStart(id){
    $('#details').find('#startday').html(id);
}

function OnMouseDownEnd(id){
    $('#details').find('#endday').html(id);    
}

Answer 1

Problem solved.

When there is nothing inside cell you need to add also CSS property: user-select:none

Then it works perfectly. Otherwise if there is text or blank cell without this css property it will try to move highlighted things.