Как выбрать только один столбец в таблице, используя пользовательский интерфейс jQuery?

То, что я пытаюсь сделать, позволяет пользователю выбирать строки из одного столбца за раз, используя пользовательский интерфейс jQuery.

То, что мне нужно сделать, это ограничить эффект перетаскивания/выделения из более чем одного столбца. Например, когда-либо столбец, пользователь запускает событие перетаскивания, в котором они не могут выделить сторону этой колонки.

Код таблицы

<table id="selectable">
<tr>
<td data-col="0">
<td data-col="1">
<td data-col="2">
</tr>
<tr>
<td data-col="0">
<td data-col="1">
<td data-col="2">
</tr>
<tr>
<td data-col="0">
<td data-col="1">
<td data-col="2">
</tr>
...etc
</table>

JQuery:

var currentCol;

$("#selectable").selectable({
filter:'td',
selecting: function(event, ui){
console.log($(ui.selected));
}
});

Но я не могу получить доступ к значению data-col, оно всегда равно null.

Спасибо Даниилу за то, что он указал мне в правильном направлении.

Чтобы заблокировать перетаскивание вверх по одному столбцу, это то, что я сделал.

    var currentCol;

    $("#selectable").selectable({
        filter: "td",
        start: function(event, ui) {
            $("td").removeClass("ui-selected");
        },
        stop: function(event, ui) {

            //Reset selector. 
            currentCol = undefined;
        },
        selecting: function(event, ui) {

            if (currentCol === undefined) {
                currentCol = $(ui.selecting).attr('data-col');
            }

            var nthChild = parseInt(currentCol) + 1; //Add one as nthChild is not zero index

            for (var i = 1; i <= 9; i++) {

                if (i != nthChild) {
                    $("td.ui-selecting:nth-child(" + i + ")").each(function() {
                        $(this).removeClass("ui-selecting");
                    });
                }
            }
            ;
        }
    });

Если все, что вам нужно, это индекс столбца, это должно работать, чтобы получить его:

$("#selectable").selectable({
filter: "td",
selecting: function(event, ui) {
console.log($(ui.selecting).prevAll().length);
}
});

Кроме того, $(ui.selecting).attr('data-col') должен работать, если вы все еще хотите использовать этот метод. В вашем примере вы используете ui.selected где вы должны использовать ui.selecting.

jsFiddle

Помните, что вы можете использовать селектор JQuery td:nth-child($column_index) (начало индекса с 1)

$("#selectable").selectable({
filter: "td:nth-child(1)",
selecting: function (e, ui) {
$(ui.selecting).css({'border':'1px solid black'})
},
unselecting: function (e, ui) {
$(ui.unselecting).css({ 'border': '' })
}
});