JQueryUI sortable thead and tbody shrinked while dragging row with two fields hidden

Question

I have a table with different rows and fields. In one row I have two fields with display:none; and when I make the drag of this rows, there is an effect like lateral padding in the <tbody> and the <thead>, the table isn't shrinked, elements of the table yes.

In the next JsFiddle in the first row doesn't work correctly, but in second row which only have one field with display:none; it works.

If have any question ask it.

Errors example

Table while dragging:

At first I thought it could be solved by looking for the number of <td> elements with the class .hidden-td (class that has a display: none;) and look for the element with the class .placeholder-style (is the class that has the <tr> that is generated when doing the drag) and add many <td> as there are in the <tr> that I am moving, but not, isn't working.

I know how much fields have clase .hidden-td with this line

var numcells = $('.hidden-td').length;

Problem

I have 9 elements in the first row and in the other I have 8. In my function start() I only hidden one column in my placeholder so when I make the drag of the first row there's one column left without apply the class .hidden-td and that's why there's a space at the end of the columns.

How can I fix this?

https://jsfiddle.net/w52m5ggb/20/

Answer 1

Having struggled with the sortable plugin myself for the past few days, I think the following changes need to be done:

1. Add the helper function to create the correct sizes on the helper (draggable object) to have the correct size.

2. In the start function, add the item html to the placeholder html, to have the placeholder stay identical to the original.

Code:

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    placeholder: "placeholder-style",
    start: function(event, ui) {
      $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')

      //copy item html to placeholder html

      ui.placeholder.html(ui.item.html());

      //hide the items but keep the height/width. 
      ui.placeholder.css('visibility', 'hidden');
    },
    stop: function(event, ui) {
        ui.item.css('display', '')
    },

    //add helper function to keep draggable object the same width
    helper: function(e, tr)
    {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index)
        {
        // Set helper cell sizes to match the original sizes
        $(this).width($originals.eq(index).width());
        });
        return $helper;
    },
    update: function( event, ui ) {
        let newOrder = $(this).sortable('toArray');
        $.ajax({
            type: "POST",
            url:'/admin/projects/updateOrder',
            data: {ids: newOrder}
        })
       .done(function( msg ) {
        location.reload();        
       });
    }
}).disableSelection();

Updated fiddle