Sürükleme

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

i tablo hücrelerini üzerinde sürükleme ediyorum. Sürüklerken (aşağı doğru hareket et), tablo kaydırmayı da kaydırmalıyım. ve ayrıca hücreleri ters (yukarı yön) seçmek istiyorum. Ne yapmalıyım?

tr sınıfında bir seçim yapıyorum.

Answer 1

jsFiddle Güncelleme

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

Ve böyle javascript ile satır-seçimi idare: sadece

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

Ben HTML’ye bir sınıf ekledi. Burada gösterdiğim yanı sıra tüm HTML ve CSS değişmedi. jsFiddle Güncelleme

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

Answer 2

Tablonuzla ilgili birçok sorun var, ancak istediğinizi düzeltirim.
fare konteyner dışında olsun, masanız kaydırma yapmak için mousedown olay işleyicisi içinde bu kodu eklemek için:

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

ve bu, sizin mouseup olay işleyicisi içinde:

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

Bkz updated Fiddle

Ama şimdi, başka bir sorun görünür. Bu kodunuzun geri kalanı nedeniyle. Satırlar, fare sütunu bıraktığı için seçilmez. return false;

içindeki

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

Çünkü return false; durak tarayıcı varsayılan davranışı (otomatik kaydırma) çıkarmadan

Answer 3

deneyin. Böyle http://jsfiddle.net/qvxBb/2/

devre dışı bırakın, normal seçim:

DEMO