jQuery 可排序 'display as a grid' 顺序

Question

基于在 http://jqueryui.com/sortable/#display-grid 中找到的 jQuery 可排序“显示为网格”示例

元素使用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;
}

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

缺点是对 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;
}