javascript - Dragging on html table cells -

fiddle

$(document).live('mouseup', function () {     flag = false; });  var colindex; var lastrow;  $(document).on('mousedown', '.csstablelisttd', function (e) {     //this line gets index of 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 full time cell , 1 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;     } }); 

i dragging on table cells. while dragging(move downward direction) have move table scroll also. , want select cells reverse (upward direction). should do.

i have make selection on tr class.

updated jsfiddle: http://jsfiddle.net/qvxbb/2/

disable normal selection this:

.myselect {     -webkit-touch-callout: none;     -webkit-user-select: none;     -khtml-user-select: none;     -moz-user-select: moz-none;     -ms-user-select: none;     user-select: none; } 

and handle row-selection javascript this:

// wether or not selecting var selecting = false; // element want make selectable var selectable = '.myselect tr:not(:nth-child(1)) td:nth-child(3)';  $(selectable).mousedown(function () {     selecting = true; }).mouseenter(function () {     if (selecting) {         $(this).addclass('csstdhighlight');         fillgaps();     } }); $(window).mouseup(function () {     selecting = false; }).click(function () {     $(selectable).removeclass('csstdhighlight'); });  // if select fast, js doesn't fire mousenter on cells.  // fill missing ones hand function fillgaps() {     min = $('td.csstdhighlight:first').parent().index();     max = $('td.csstdhighlight:last').parent().index();     $('.myselect tr:lt('+max+'):gt('+min+') td:nth-child(3)').addclass('csstdhighlight'); } 

i added class in html. html , css in unchanged besides i've shown here.

updated jsfiddle: http://jsfiddle.net/qvxbb/2/