Thanks to Daniel for pointing me in the right direction.
In order to lock the drag down top a single column, this is what I did.
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");
});
}
}
;
}
});