Quiero generar algunos datos de la base de datos en una tabla HTML y quiero que el usuario pueda reordenar las filas de la tabla. Para lograr esto, utilicé jQuery UI ordenable, así:
<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>";
                }
?>
El problema es que cuando arrastro una tabla tr, solo tdse arrastran. Además, y lo más importante, solo se puede arrastrar la primera fila: el efecto no se aplica a otras filas. ¿Como puedo resolver esto?
                    
                        jquery
                                jquery-ui
                                html-table
                                jquery-ui-sortable
                                
                    
                    
                        Samer El Gendy
fuente
                
                fuente

idlos atributos deben ser únicos dentro de un documento. Su código está creando varios elementos con el mismoid(sortable). Intente usar unclassen su lugar.tds con elcontenteditableatributo no parecen ser editables si su fila se puede ordenar usando este método. Solo un FYI.Respuestas:
Puede llamar a
sortableen<tbody>lugar de en las filas individuales.<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>Mostrar fragmento de código
$(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>fuente
<tbody>a</tbody>;)