90

I want to output some data from the database in a HTML table, and I want the user to be able to reorder table rows. To achieve this, I used jQuery UI sortable, thus:

<script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>
<?php 
 while($row = mysql_fetch_assoc($co_authors)) {
                    echo "<tr id='sortable'><td>{$row['author_email']}</td>
                         <td>{$row['coauthor_level']}</td>";
                         <td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>"
                            paper="<?php echo $row['paper_id'] ?>">Remove</button></td>
                         </tr>";
                }
?>

The problem is that when I drag a table tr, only td are dragged. Also, and most importantly, only the first row is dragable: the effect is not applied to other rows. How can I solve this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Samer El Gendy
  • 1,683
  • 2
  • 23
  • 45
  • 4
    `id` attributes have to be unique within a document. Your code is creating several elements with the same `id` (`sortable`). Try using a `class` instead. – Frédéric Hamidi Jul 13 '12 at 12:59
  • For what it's worth - `td`s with the `contenteditable` attribute don't seem to be editable if their row can be sorted using this method. Just an FYI. – jg2703 Apr 27 '17 at 20:02

1 Answers1

219

You can call sortable on a <tbody> instead of on the individual rows.

<table>
    <tbody>
        <tr> 
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td> 
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>  
    </tbody>    
</table>​

<script>
    $('tbody').sortable();
</script> 


$(function() {
  $( "tbody" ).sortable();
});
 
table {
    border-spacing: collapse;
    border-spacing: 0;
}
td {
    width: 50px;
    height: 25px;
    border: 1px solid black;
}
 

<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr> 
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td> 
            <td>10</td>
        </tr>  
    </tbody>    
</table>
kurdtpage
  • 3,142
  • 1
  • 24
  • 24
TJ VanToll
  • 12,584
  • 4
  • 43
  • 45
  • this working fine now, and the whole tr is dragable, but the new problem now is that the tr position doesn't change, i guess because i derive data from the database and they should come in that order, so can i change the positioning in the database too? – Samer El Gendy Jul 13 '12 at 14:34
  • Yeah if you want to preserve the sorted positions you'll have to persist that information somewhere. – TJ VanToll Jul 13 '12 at 15:20
  • 3
    YEEES THANKS!! I was so afraid I would have to redo the whole design and I only had one hour to make it work, thanks heaps! – NaturalBornCamper Nov 21 '14 at 08:28
  • 5
    Posting on behalf of [user236766](http://stackoverflow.com/users/2742476/user236766): you might want to change the last `` to `` ;) – NathanOliver Oct 18 '16 at 12:54
  • Don't know why the hell I decided to call sortable on the table and not the tbody element... Thanks! – ksudu94 Jan 09 '20 at 21:49
  • Thank you ! And after reading, this is absolutely logical! We want the tbody to be sortable, not the tr's ! – Jona May 04 '20 at 23:57