jQuery可排序'显示为网格'顺序

Question

基于在http://jqueryui.com/sortable/#display-grid

找到的jQuery可排序'显示为网格'示例

＆lt; li>元素使用css

显示如下

1  2  3  4 
5  6  7  8 
9 10 11 12

有没有办法将它们命名为

1  4  7  10
2  5  8  11
3  6  9  12

因此排序是按“列”行事吗？例如，拖动10到7会将7推到8，8到9,9到10和11，并且12将保持不变。

Answer 1

对于ul，添加样式

ul#sortable {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

height可以根据您想要的行数进行更改。

缺点是flex支持IE +10.0

https://css-tricks.com/arranging-elements-top-bottom-instead-left-right-float/

修改

添加一些额外的flex指令（例如-webkit-flex）解决了safari（http://www.w3schools.com/cssref/css3_pr_flex-direction.asp）：

ul#sortable {
  height: 300px;
  display: -webkit-flex;
  -webkit-flex-direction:column;
  -webkit-flex-wrap: wrap; 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}