水平和垂直可排序的div

Question

我想通过可排序的网格来解决我的问题。我有2行，两行都包含3列。

<div id="sortable" class="connectedSortable">
<div class="row">
    <div class="column">column</div>
    <div class="column">column</div>
    <div class="column">column</div>
</div>
<div class="row">
    <div class="column">column</div>
    <div class="column">column</div>
    <div class="column">column</div>
</div>
</div>

我希望这些可以垂直排列（列）和水平排列（行） 这是我的CSS：

    .row {  height: 200px;  }

    .row:nth-child(even) {  background: lightgray;  }

    #sortable {  height: 100px;  }

    .column {
        float: left;
        display: inline-block;
        width: 33.3%;
        height: 200px;
    }
    .column:nth-child(odd) {  background: red;  }

    .row:nth-child(2){
        background:yellow;
    }

    .row:nth-child(2) .column:nth-child(odd) {  background: pink;  }

看起来像这样：

我无法选择第一行或第二行来垂直更改位置，我认为这是因为列也可以排序，并且列使用行的全宽。

我使用的唯一jQuery是以下（使用jQueryUI）：

$(function () {
        $("#sortable, .row").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });

的jsfiddle： JsFiddle

Answer 1

我通过使用'items'和占位符div来解决我的问题。以某种方式使用placeholderdiv使我能够选择行块。现在我可以选择一行（通过将鼠标靠近行的顶部）和第一列。

    $("#sortable, .row").sortable({
            items: ".row, .column"
    });

参见JSFiddle https://jsfiddle.net/ort8zLmf/5/

但我希望有更好的解决方案。

Answer 2

这是否符合您的要求。我更改了布局，因此列都具有相同的父级，然后使用下面的内容清除它们。

.conlumn:nth-child(3n) {
  content:"";
  clear:both;
}

https://jsfiddle.net/g4q95kp2/1/