trascinando celle della tabella html

Question

Fiddle

$(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; 
    } 
}); 

sto trascinando celle della tabella. Durante il trascinamento (sposta la direzione verso il basso) devo spostare anche lo scroll del tavolo. e voglio anche selezionare le celle in senso inverso (direzione verso l'alto). cosa devo fare.

Ho fatto una selezione sulla classe TR.

Answer 1

Aggiornato jsFiddle: http://jsfiddle.net/qvxBb/2/

disabilitare la selezione normale in questo modo:

.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; 
} 

e la maniglia della riga-selezione con javascript in questo modo:

// wether or not we are selecting 
var selecting = false; 
// the element we want to 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 you select too fast, js doesn't fire mousenter on all cells. 
// So we fill the missing ones by 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'); 
} 

ho appena aggiunta una classe nell'HTML. Tutti gli HTML e i CSS sono rimasti invariati a parte ciò che ho mostrato qui.

Aggiornato jsFiddle: http://jsfiddle.net/qvxBb/2/

Answer 2

Ci sono diversi problemi con il tuo tavolo, ma correggerò quello che hai chiesto.
Per rendere il vostro rotolo tavolo quando il mouse ottenere al di fuori del contenitore, aggiungere questo codice all'interno del vostro gestore mousedown eventi:

$('body').on('mousemove', function(e){ 
    div = $('#divScroll');  
    if(e.pageY > div.height() && (e.pageY - div.height()) > div.scrollTop()) { 
     div.scrollTop(e.pageY - div.height()); 
    } 
}); 

e questo, all'interno del vostro gestore mouseup eventi:

$('body').off('mousemove'); 

Vedere le updated Fiddle

Ma ora viene visualizzato un altro problema. Questo è a causa del resto del codice. Le linee non sono selezionate perché il mouse lascia la colonna.

Answer 3

provare a rimuovere la return false; all'interno

$('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight'); 
    flag = true; 
    return false; //Remove this line 
} 

Poiché il comportamento return false; fermate browser predefinito (scorrimento automatico).

DEMO