jQuery UI Sortable table and cell is shrinking while dragging tr

Question

While dragging am facing two issues.

1. table it self is shrinking when i have a hidden td.
2. dragged tr cell(td)s are shrinking

This is the code of the sortable:

$('tbody').sortable({
    items: ">tr",
    appendTo: "parent",
    opacity: 1,
    containment: "document",
    placeholder: "placeholder-style",
    cursor: "move",
    delay: 150,
});

jsfiddle link

Redhead

updated Link: jsfiddle.net/raajdand/5pqcwk9b – Redhead

problem 2 addressed here jsfiddle.net/raajdand/40wutxxL – Redhead

did you check the answer? – Christadelphian

Yes Dekel. Thank you. – Redhead

Answer 1

The problem with the shrinking of the table is because you have a hidden cell (and in the placeholder that the sortable creates for you there are 5 cells and non of them are hidden. You can fix this by setting the 2nd td inside the placeholder as hidden once you start the drag:

$(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')

The second problem is caused by the fact that the tr that you drag was changed to position: absolute and it is no longer have the properties of the table. You can fix this by setting display: table to that row:

ui.helper.css('display', 'table')

This change must be un-done when the the sorting is done.

Here is the complete change:

start: function(event, ui) {
    $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')
    ui.helper.css('display', 'table')
},
stop: function(event, ui) {
    ui.item.css('display', '')
}

Here is a working example

$('tbody').sortable({
  items: ">tr",
  appendTo: "parent",
  opacity: 1,
  containment: "document",
  placeholder: "placeholder-style",
  cursor: "move",
  delay: 150,
  start: function(event, ui) {
  	$(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')
    ui.helper.css('display', 'table')
  },
  stop: function(event, ui) {
  	ui.item.css('display', '')
  }
});

.sort-table{
  width: 100%;
  border: 1px solid #cecece;
  background-color: #d5a45a;
}
thead{
  background-color: #0e79c4;
}
th{
     font-size: 1em;
    line-height: 1.375em;
    font-weight: 400;
    background-color: #0e79c4;
    vertical-align: middle;
    padding: 0.5em 0.9375em;
    text-align: left;
}
tr{
  border: 1px solid #cecece;
}
td{
  padding: 1em;
  vertical-align: middle;
   display: table-cell;
   border-top: 1px solid #cecece;
}
.hidden-td{
  display: none;
}
.placeholder-style{
  background-color: grey;
}

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table class="sort-table">
  <thead>
    <tr>
      <th class="header-td">Column1 </th>
      <td class="hidden-td">row1 hidden td</td>
      <th class="header-td">Column2 </th>
      <th class="header-td">Column3 </th>
      <th class="header-td">Column4 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="body-td">row1 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row1 td2</td>
      <td class="body-td">row1 td3</td>
      <td class="body-td">row1 td4</td>
    </tr>
    <tr>
      <td class="body-td">row2 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row2 td2</td>
      <td class="body-td">row2 td3</td>
      <td class="body-td">row2 td4</td>
    </tr>
    <tr>
      <td class="body-td">row3 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row3 td2</td>
      <td class="body-td">row3 td3</td>
      <td class="body-td">row3 td4</td>
    </tr>
    <tr>
      <td class="body-td">row4 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row4 td2</td>
      <td class="body-td">row4 td3</td>
      <td class="body-td">row4 td4</td>
    </tr>
  </tbody>
</table>

And a jsfiddle: http://jsfiddle.net/mjkq4fb6/

Christadelphian

can you check my last question? Maybe can help, I'm really stuck with this @Christadelphian – Kelsy

Can you please add a link? I'm not sure which question you refer to. – Christadelphian

Of course, #47311412 – Kelsy

you have the link here. – Kelsy

if you add another field with display none, is not working. Your code works perfectly if we have only one field with display:none; can you try it please? – Kelsy

The solution you can try is to count the number of hidden <td>s and set this number of cells (inside the placeholder) as hidden. – Christadelphian

Correct me if I'm wrong. In your function you find the element with class .placeholder-style (<tr>) and you add the class .hidden-td. I find the number of hidden <td> with this line: var numcells = $('.hidden-td').length but how can I set this variable value inside the <tr>? This is totally diferent than this? $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td') thanks a lot, hope you can help me. @Christadelphian – Kelsy

Answer 2

The existing answer is correct that the problem is that the placeholder row doesn't have any cells hidden. But instead of hooking into the start and stop methods, it will be easier to apply the appropriate styles to the classes that jQuery already uses.

The placeholder row has the class ui-sortable-placeholder, We can make all of its cells hidden with .ui-sortable-placeholder td{ display: none; } and the row will still be visible. The dragging row has the class ui-sortable-helper; we want its display to be table.

A shortened example:

$('tbody').sortable();

td{
   border-top: 1px solid #cecece;
}
.hidden-td{
  display: none;
}
.ui-sortable-placeholder td{
    display: none;
}
.ui-sortable-helper{
    display: table;
}

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table class="sort-table">
  <thead>
    <tr>
      <th>Col1 </th>
      <td class="hidden-td">row1 hidden td</td>
      <th>Col2 </th><th>Col3 </th><th>Col4 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row1 td1</td>
      <td class="hidden-td">row1 hidden td</td>
      <td>row1 td2</td><td>row1 td3</td><td>row1 td4</td>
    </tr>
    <tr>
      <td>row2 td1</td>
      <td class="hidden-td">row1 hidden td</td>
      <td>row2 td2</td><td>row2 td3</td><td>row2 td4</td>
    </tr>
    <tr>
      <td>row3 td1</td>
      <td class="hidden-td">row1 hidden td</td>
      <td>row3 td2</td><td>row3 td3</td><td>row3 td4</td>
    </tr>
    <tr>
      <td>row4 td1</td>
      <td class="hidden-td">row1 hidden td</td>
      <td>row4 td2</td><td>row4 td3</td><td>row4 td4</td>
    </tr>
  </tbody>
</table>

Hornblende