Drag Drop JS Asp.net VB

I'm using the dragable and droppable function in javascript to move cells in a GridView. Everything works, the only thing I don't like, when I move a cell it shifts everything as if moving the td. The programming language used is VB.NET, while the drag-and-drop part I used Javascript. Do you think it is also possible to insert the switch function between two names in two different cells? Any advice? Thank you very much!! Gif of what's going on

 var colIndex, rowIndex;
$('[id^="GridView"] tr td').draggable({
    revert: "invalid",
    zIndex: 100,
    start: function (event, ui) {
        var foo = $(ui.helper).parent(); 
        colIndex = foo.index();
        rowIndex = foo.parent().index();

        $(ui.helper).css({
            padding: "2.5px 5px",
            border: "1px solid #ddd",
            background: "#f2f2f2"
        });

    }
});

        $('#GridView2 tr td').droppable({
            accept: "#GridView1 tr td, #GridView2 tr td",
            activeClass: "ui-state-highlight",
            drop: function (ev, ui) {
                var foo2 = $(ui.helper).parent();
                colIndex2 = foo2.index();
                rowIndex2 = foo2.parent().index();

                var foo = $(ev.target);
                var spanCount = foo.find('span').length;
                var myColInd = foo.index();
                var myRowInd = foo.parent().index();
                var text_dest = foo.text();

                if (text_dest == String.fromCharCode(160) || text_dest == '') {
         
                    var x = document.getElementById($(this).closest('table').attr('id')).rows
                    var y = x[myRowInd].cells
                    y[myColInd].innerHTML = ""

                    $(ui.draggable).detach().css({
                        top: 'auto',
                        left: 'auto',
                        background: '#f3f3f3'
                    }).appendTo(this);

                    var arr = [];
                    $("#" + $(this).closest('table').attr('id') + " tr").each(function () {
                        arr.push($(this).find("th").eq(myColInd).text());
                    });

                    var arr2 = [];
                    $("#" + $(this).closest('table').attr('id') + " tr").each(function () {
                        arr2.push($(this).find("td").eq(myColInd).text());
                    });


                    let prefix = $('#DropDownList1').val() + ',Lu,' + myRowInd + ',' + arr[0] + ',' + arr2[myRowInd] + ',' + $('#Label1').text() + ',' + $('#Label2').text();

                    $.ajax({
                        type: "POST",
                        url: "index.aspx/InsRec",
                        data: "{ 'prefix': '" + prefix + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: code1

                    });

                }
                else {
                    $(ui.draggable).draggable('option', 'revert', true);
                    return false;
                };

            }
        });