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 la

Answer 1

You could try the approach in the snippet below.

$("#tabs").tabs();

$("#tbodyproject").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone",
    placeholder: "placeholder-style",
    start: function(event, ui) {
      ui.helper.css('display', 'table');
     // console.log(ui.placeholder.html())
    },
    stop: function(event, ui) {
        ui.item.css('display', '')
    },
    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();

img {
  width: 100px;
}
.hidden-td{
  display:none;
}
.table{
  background-color:green;
  border:0;
  width:100%;
}
.trdrag{
  background-color:yellow;
}
.trdrag.ui-sortable-handle td.tdslug, .trdrag.ui-sortable-handle td.tdslug img{
  text-align:center;
  align-items:center;
  display: table-cell;
  justify-content: center;
}
.trdrag.ui-sortable-handle td.tdslug{
  white-space:normal;
  word-wrap: break-word;
}
.trdrag.ui-sortable-handle td.tdslug img{
  padding-left:1rem;
}
.trdrag.ui-sortable-handle {
  text-align:center;
  align-items:center;
  display: table-row;
  justify-content: center;
  width:100%;
  margin-left: .3rem;
}
  
.thcenter{
  background-color:grey !important;
}
.ui-sortable-helper {
  left:0px!important;
}
.idrow{
  width:5%;
}
.tdvisible{
  width:5%;
}
.tdslug{
  width:10%;
}
.tdimg{
  width:15%;
}
.tdorder{
  width:20%;
}
.tdacciones{
  width:40%;
}

.placeholder-style td {
  display: none;
}

.placeholder-style td:nth-child(-n+7) {
  display: table-cell;
}

        

            

              

                

                  

                    
ID
                    
Visible
                    
Nombre
                    
Header
                    
Home
                    
Orden
                    
Acciones
                  
                
                
 
                    

                      
1
                      
Testing
                      
Testing2
                      
 
                        Yes
                      
                      
Slug
                      

                      

                      
Order 1
                      

                      

                          Edit 
                          
                          Delete
                      
                     
                    
                     

                      
2
                      
Testing
                      
 
                        Yes
                      
                      
Slug
                      

                      

                      
Order 1
                      

                      

                          Edit 
                          
                          Delete
                      
                     
                    
                     

                      
3
                      
Testing
                      
 
                        Yes
                      
                      
Slug
                      

                      

                      
Order 1
                      

                      

                          Edit 
                          
                          Delete
                      
                     
                    
                     

                      
1
                      
Testing
                      
 
                        Yes
                      
                      
Slug
                      

                      

                      
Order 1
                      

                      

                          Edit 
                          
                          Delete
                      
                     
                    
                     

                      
4
                      
Testing
                      
 
                        Yes
                      
                      
Slug
                      

                      

                      
Order 1
                      

                      

                          Edit 
                          
                          Delete
                      
                     
                    
                    

                      
5
                      
 
                        Yes
                      
                      
Slug
                      

                      

                      
Order 2
                      

                      


                          Edit 
                          
                          Delete