Перетаскивание на html-ячейки таблицы

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

Я перетаскиваю ячейки таблицы. При перетаскивании (перемещение вниз) мне также нужно перемещать таблицу прокрутки. а также я хочу, чтобы выделить ячейки в обратном направлении (вверх). что я должен делать.

Я делаю выбор в tr-классе.

Ответы

Ответ 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;
}

И обработайте выбор строки с помощью 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/

Ответ 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');

Смотрите обновленный скрипт

Но теперь появляется другая проблема. Это из-за остальной части вашего кода. Строки не выбраны, так как мышь покидает столбец.

Ответ 3

Попробуйте удалить return false; внутри

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

Потому что return false; останавливает поведение браузера по умолчанию (автоматически прокручивается).

DEMO