如何使用jquery sortable对表的所有行中的表单元格进行排序？

Question

我想创建一个可排序的表，并使用jquery可排序的，我可以对表中的行或行中的单元格进行排序，但不能在行之间移动单元格。我怎样才能做到这一点？

例如。在这里：http : //jsfiddle.net/dado_eyad/mKaFe/2/

我想移动Second row: 2到的地方First row: 1

Answer 1

我有一个CSS技巧可以让可排序的表格单元格
像可排序的网格示例：https：
//jqueryui.com/sortable/#display-grid

Javascript部分就这么简单：

$('table').sortable({
    items: 'td', 
});

关键是要利用CSS display属性。

当您将一个单元格从row2拖动到row1时，
row1将变为4个单元格，row2仅剩2个单元格，
其宽度将缩小以匹配表的宽度。

如果我们使用TR display: inline;在样式表，
让td显示为inline-block。
布局渲染的行为更像是内联块列表。
忽略tr的限制。

有关现场演示，请参见下面的小提琴：http :
//jsfiddle.net/elin/4Q6Qn/