खींच

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

मैं तालिका सेल पर खींच रहा हूँ। खींचते समय (नीचे की दिशा में आगे बढ़ें) मुझे टेबल स्क्रॉल भी ले जाना है। और मैं कोशिकाओं के विपरीत (ऊपर की दिशा) का चयन करना चाहता हूं। मुझे क्या करना चाहिए।

मैंने टीआर कक्षा में चयन किया है।

Answer 1

अपडेट किया गया jsFiddle: http://jsfiddle.net/qvxBb/2/

इस तरह अक्षम सामान्य चयन:

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

और इस तरह जावास्क्रिप्ट के साथ पंक्ति चयन संभाल:

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

मैं बस एचटीएमएल में एक कक्षा जोड़ा। मैंने जो कुछ भी दिखाया है उसके अलावा अपरिवर्तित में सभी HTML और CSS।

अपडेट किया गया jsFiddle: http://jsfiddle.net/qvxBb/2/

Answer 2

आपकी तालिका के साथ कई समस्याएं हैं, लेकिन मैं आपके द्वारा पूछे गए एक को सही कर दूंगा।
अपनी मेज स्क्रॉल करने के लिए जब अपने माउस कंटेनर के बाहर मिलता है, अपने mousedown ईवेंट हैंडलर के अंदर इस कोड जोड़ें:

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

और इस, अपने mouseup ईवेंट हैंडलर के अंदर:

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

देखें updated Fiddle

लेकिन अब, एक और मुद्दा दिखाई देता है। यह आपके शेष कोड की वजह से है। रेखाएं चयनित नहीं हैं क्योंकि माउस कॉलम छोड़ देता है।

Answer 3

return false;

अंदर

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

क्योंकि return false; बंद हो जाता है ब्राउज़र डिफ़ॉल्ट व्यवहार (स्वचालित रूप से स्क्रॉल) निकालने का प्रयास करें।

DEMO