$(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;
}
});
我正在拖动表格单元格。 拖动(向下移动)时,我还必须移动表格滚动条。 而且我还想选择相反的单元格(向上方向)。 我该怎么办。
我已经选择了 tr 类。
最佳答案
更新的 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;
}
然后像这样用 javascript 处理行选择:
// 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 中添加了一个类。除了我在此处显示的内容外,所有 HTML 和 CSS 均未更改。
更新的 jsFiddle:http://jsfiddle.net/qvxBb/2/
关于javascript - 拖动 html 表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17723747/