jQuery перемещение ячейки колонки таблицы в вертикальном положении

Сайт https://anteh.ru

При реализации функции вертикального перетаскивания строк использовался, для визуализации, draggable и возникла необходимость задать вертикальное перемещение helper. Но максимум, что получалось штатными средствами -это вертикальное движение helper вдоль правой вертикальной границы. Было так:

rows.find("td:eq(" + ConfigColumn + ")").draggable(
    {
    axis: 'y',              //Перемещение только по y
    //helper: 'clone',      
    delay: 400,             //Время в миллисекундах, по истечении которого, начнется перетаскивание
    distance: 5,            //Расстояние в пикселах, которое указатель мыши должен пройти после того, как вы нажали на кнопку мыши, прежде чем начнется перетаскивание
    opacity: 0.70,          //Устанавливает прозрачность перетаскиваемого элемента
    containment: Hrws.parent().parent(), //Область перемещения ограничена текущей таблицей
    helper: function() { return $(this).clone().width($(this).width()).height($(this).height()); }, 
    start: function(e, ui) {...},
    stop: function(e, ui) {...},
    drag: function(e, ui) {...}
});

Rows -это все строки данных таблицы, в которых находятся draggable ячейки. Hrws -это первая/нулевая ячейка данных столбца таблицы, определённая, как: var Hrws = rows.first().find("td:eq(" + ConfigColumn + ")"); ConfigColumn -номер столбца, ячейки которого будут draggable. Привёл всё, как было, у вас может быть по другому, например вы выберете все ячейки данных таблицы, как перемещаемые вертикально. На скриншоте ниже понятно, как движется перемещаемая ячейка, вместо вертикального движения в колонке она движется вертикально справа от таблицы:

В общем не правильно работает всё это дело -helper двигается в вертикальном направлении и заданных границах, но за пределами таблицы. Попробовал использовать containment: [x_left, y_left, x_right, y_right], //Перемещение в указанной области. Координаты брались через offset. Работает, но координаты приходилось пересчитывать через $(window).resize(function(){}); при смене масштаба. И всё равно поле ровно над ячейками не устанавливалось, был хоть и слабо заметный, но перекос, плавающий, при изменении resize -это конечно придирки.
Попробовал следующее: в start создал клон ячейки, добавил его к таблице, в drag зафиксировал x и получил клон ячейки передвигаемый вдоль y и в пределах таблицы. Потом нужно будет добавить удаление клона и рассмотреть некоторые другие моменты. Правда "axis: 'y'," нужно оставить и скрыть helper. Но это всё…. Наконец в drag попробовал задать координаты helper/у, вместо клона ячейки и радость настала. Гвоздь программы axis: 'y', и ui.helper.offset({…}); именно эти строки и дают вертикальное перемещение ячейки там, где нужно и с автоматическим учётом resize. И что порадовало, не нужно использовать $(window).resize(function(){});. На сколько это юзабельно и аукнется ли чем либо покажет время, работает минимум в IE Firefox Safari. В целом, для реализации вертикального перетаскивания ячейки в пределах столбца таблицы нужно:

rows.find("td:eq(" + ConfigColumn + ")").draggable(
{
    axis: 'y',              //(ОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР 1 из 2) Перемещение только по y
    delay: 400,             //Время в миллисекундах, по истечении которого, начнется перетаскивание
    distance: 5,            //Расстояние в пикселах, которое указатель мыши должен пройти после того, как вы нажали на кнопку мыши, прежде чем начнется перетаскивание
    opacity: 0.70,          //Устанавливает прозрачность перетаскиваемого элемента
    containment: Hrws.parent().parent(), //Область перемещения ограничена текущей таблицей
    helper: function() {
        return $(this).clone().width($(this).width()+1).height($(this).height()); //Устанавливаем ширину и высоту helper равной ширине и высоте ячейки
    },
    start: function(e, ui) {
        $(this).stop().animate({ opacity: '0.1' }, 200, "linear"); //Гасим видимость ячейки
    },
    stop: function(e, ui) {
        $(this).stop().animate({ opacity: '1' }, 500, "linear"); //Проявляем ячейку
    },
    drag: function(e, ui) {        
        ui.helper.offset({ left: $(this).offset().left, top: ui.helper.offset().top }); //(ОБЯЗАТЕЛЬНЫЙ ПАРАМЕТР 2 из 2)
    }
});

Работает так же: ui.helper.offset({ left: $(this).offset().left }); Но произвольно установить координаты helper/у не выходит. В общем праведный костыль найден.
Rows -это все строки данных таблицы, содержащих draggable ячейки. Получены были так:
var rows = $('#' + RowTypeArr[0] + " tr:gt(" + (skp_tg - 1) + "):lt(" + skp_lt + ")"); //Получаем все строки данных
Здесь RowTypeArr[0] -идентификатор таблицы, skp_tg-1 -начальный индекс выбора строк из таблицы, а skp_lt количество строк данных к выборке. Это учитывает, что у штатной GridView ASP.NET обязательными могут быть только строки данных любого количества, а верхний/нижний pager header footer могут быть, а могут и не быть. Но если у вас случай частный, и заранее известно сколько чего будет, то можно обойтись и без излишеств.

Работающий пример Отключено