Q:

How do you use jquery sortable to sort table cells in all the table's rows?

I wanna make a sortable table and using jquery sortable I can either sort the rows in the tables or the cells in a row, but I can't move a cell between rows.
How can I do that?
For example.
In here: http://jsfiddle.net/dado_eyad/mKaFe/2/
I wanna move Second row: 2 to the place of First row: 1

A:

I have a CSS trick to let sortable table cells
act like the sortable grid sample:
https://jqueryui.com/sortable/#display-grid
the Javascript part it as simple as:
$('table').sortable({
    items: 'td', 
});

The point is to make use of the CSS display property.
when you drag a cell from row2 to row1,
row1 would become 4 cells, row2 only have 2 cells left,
and the width would be shrinked to match the table width.
If we use tr display: inline; in the stylesheet,
let td display as inline-block.
The layout rendering would behave more like a list of inline-blocks.
Ignoring the restrictions of tr.
For a live demo, see the fiddle below:
http://jsfiddle.net/elin/4Q6Qn/

A:

Wrap your < tr >'s in a < tbody > and change the your code to:
  $("table tbody tr").sortable({
    items: 'td',
  }).disableSelection();

DEMO
You have to specify the container that contains the elements you want to be sortable not the actual elements.
I wanna move Second row: 2 to the place of First row: 1
 $("table tbody").sortable({
    items: 'tr',
  }).disableSelection();

DEMO

