sort - Uso de la interfaz de usuario jQuery ordenable con tablas HTML

sort table bootstrap

Question

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 se arrastran td . Además, y lo más importante, solo la primera fila es dragable: el efecto no se aplica a otras filas. ¿Como puedo resolver esto?

Answer 1

Puede llamar a sortable en <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>

$(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>