przeciąganie komórek tabeli 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; 
    } 
}); 

jestem Przeciąganie na komórki tabeli. Podczas przeciągania (przesuń w dół) muszę również przewinąć tabelę. , a także chcę wybrać komórki do tyłu (kierunek do góry). co powinienem zrobić.

Dokonałem selekcji w klasie tr.

Answer 1

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

Wyłącz normalny wybór tak:

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

I obsłużyć wiersz selekcji z javascript tak:

// 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'); 
} 

Właśnie dodano klasę w kodzie HTML. Wszystkie HTML i CSS w niezmienionej wersji oprócz tego, co tu pokazałem.

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

Answer 2

Jest kilka problemów z twoim stołem, ale poprawię ten, o który prosiłeś.
Aby dokonać zwój stołowego gdy mysz wydostać się na zewnątrz pojemnika, dodać ten kod wewnątrz uchwytu mousedown zdarzenia:

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

i to wewnątrz uchwytu mouseup zdarzenia:

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

Zobacz updated Fiddle

Ale teraz pojawia się kolejny problem. Wynika to z reszty kodu. Linie nie są wybierane, ponieważ mysz opuszcza kolumnę.

Answer 3

spróbuj usunąć return false; wewnątrz

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

ponieważ return false; przystanki domyślną przeglądarką zachowanie (przewijanie automatycznie).

DEMO