$(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 am Dragging on table cells. While dragging(move downward direction) i have to move table scroll also. and also i want to select cells reverse (upward direction). what should i do.
I have make an selection on tr class.
Updated jsFiddle: http://jsfiddle.net/qvxBb/2/
Disable normal selection like 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 the row-selection with javascript like this:
// 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');
}
I just added a class in the HTML. All the HTML and CSS in unchanged besides what I've shown here.
Updated jsFiddle: http://jsfiddle.net/qvxBb/2/
There are several problems with your table, but I will correct the one you asked for.
To make your table scroll when your mouse get outside the container, add this code inside your mousedown
event handler :
$('body').on('mousemove', function(e){
div = $('#divScroll');
if(e.pageY > div.height() && (e.pageY - div.height()) > div.scrollTop()) {
div.scrollTop(e.pageY - div.height());
}
});
and this, inside your mouseup
event handler :
$('body').off('mousemove');
See the updated Fiddle
But now, another issue appear. This is because of the rest of your code. The lines are not selected because the mouse leave the column.
Try removing the return false;
inside
$('#contentPlaceHolderMain_tableAppointment tr').eq(rowIndex).find('td').eq(colIndex).addClass('csstdhighlight');
flag = true;
return false; //Remove this line
}
Because return false;
stops browser default behavior (scrolling automatically).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.