Dragging on html table cells

html, javascript, jquery, web

Solution

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/

Problem

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

Original source

Related problems