Jquery sortable table shrinks while dragging

Question

My problem is that table shrinks while dragging. Row remains it's width, but table shrinks. Is there a way to keep table's original width while dragging?

Example is here

Sortable functionality is being called with:

 $("table[id=tblSelectedCAMERC] tbody").sortable();

Answer 1

When using Sortable for a <table> element, it is sometimes best to define exactly what will be the item. Please review: http://api.jqueryui.com/sortable/#option-items

I would advise the following:

$(function(){  
  $("table[id=tblSelectedCAMERC] tbody").sortable({
    sort: function(evt, ui){
      debugger;
    },
    item: "> tr",
    handle: ".iORAS_ORD"
  }).disableSelection();
});

Update

As there are some extra cells, You can do this:

CSS

.shrink td:last-child {
  display: none;
}

JavaScript

$(function(){  
  $("table[id=tblSelectedCAMERC] tbody").sortable({
    sort: function(evt, ui){
      debugger;
    },
    items: "> tr",
    handle: ".iORAS_ORD",
    scroll: true,
    tolerance: "intersect",
    placeholder: "shrink"
  }).disableSelection();
});

Remember that the placeholder class is applied to the item, in this case the <tr>. So if we need to suppress or hide some of the cells, we need to select them. This example assumes 1 extra cell. If you have more cells, I would advise adding a class to them (E.G.: hidden) so that you can more easily select them. You could also try other CSS selectors (https://www.w3schools.com/cssref/css_selectors.asp)

Answer 2

Add this in your style sheet:

.ui-sortable-helper {
  display: table;
}