水平和垂直可排序的 div答案

【问题标题】：Horizontal and vertical sortable divs水平和垂直可排序的 div
【发布时间】：2017-11-10 00:51:30
【问题描述】：

我想用可排序的网格来回答我的问题。我有 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

【问题讨论】：

标签： javascript html css jquery-ui

【解决方案1】：

我通过使用“项目”和占位符 div 解决了我的问题。不知何故，使用 placeholderdiv 使我能够选择行块。现在我可以选择一行（通过将鼠标靠近行的顶部）和第一列。

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

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

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

【讨论】：

哦，对了，我误会了。那么我的回答毫无意义：P

【解决方案2】：

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

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

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

【讨论】：

Np，感谢收看。但这不是我想要的哈哈。我希望能够对行进行垂直排序（能够选择行并将其向上或向下拖动另一行），并且仍然能够对列进行水平排序。