Search code examples
javascriptjquerytablednd

jQuery tablednd move two rows together


I have prepared a jsfiddle environment, just to show you my issue. I want to move two rows together (the red ones) with the tablednd jquery plugin or maybe an alternative / workaround.

Any ideas about that?

I know I can nest a table inside a tr/td but then I loose the table header width td-alignments with the root table.

Many thanks.

<table border="1" id="table-1" cellpadding="5" cellspacing="0" class="grid">
<thead class="header nodrop">
  <th nowrap style="">Col0</th>
  <th nowrap style="">Col1</th>
  <th nowrap style="">Col2</th>
  <th nowrap style="">Col3</th>
  <th nowrap style="">Col4</th>   
  <th nowrap style="">Col5</th>
  <th nowrap style="">Col6</th>
  <th nowrap style="">Col7</th>        
</thead>
<tbody>
    <!-- first row group -->
        <tr id="1111" style="background-color:red;">
                <td>Text1.0</td>
                <td>Text1.1</td>
                <td>Text1.2</td>                    
                <td>Text1.3</td>
                <td>Text1.4</td>
                <td>Text1.5</td>
                <td>Text1.6</td>
                <td>Text1.7</td>
        </tr>
        <tr id="1111" style="background-color:red;">              
              <td colspan="8">this row belongs to ROW ID 1111 above red</td>
        </tr>  
    <!-- second row group -->
        <tr id="2222">
                <td>Text2.0</td>
                <td>Text2.1</td>
                <td>Text2.2</td>                    
                <td>Text2.3</td>
                <td>Text2.4</td>
                <td>Text2.5</td>
                <td>Text2.6</td>
                <td>Text2.7</td>
        </tr>
        <tr id="2222">              
              <td colspan="8">this row belongs to ROW ID 2222 above white</td>
        </tr>         
</tbody></table>

http://jsfiddle.net/vbnyfapt/5/


Solution

  • Finally I solved it!

        $("#table-1").sortable({
        helper: function(e, ui) {
             ui.children().each(function() {
                 $(this).width($(this).width());
             });
             return ui;
        },
        items: "tbody"
    }).disableSelection();
    

    http://jsfiddle.net/cfv6tbd0/