CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
dand
dand

Reputation: 141

jQuery UI Sortable table and cell is shrinking while dragging tr

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

Upvotes: 4

Views: 2046

Answers (2)

Teepeemm
Teepeemm

Reputation: 4508

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>

Upvotes: 0

Dekel
Dekel

Reputation: 62666

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/

Upvotes: 6

Related Questions