javascript - 水平和垂直可排序 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();
    });

J fiddle : JsFiddle

Answer 1

我已经通过使用“元素”和占位符 div 解决了我的问题。不知何故，使用 placeholderdiv 使我能够选择行 block 。现在我可以选择一行(通过将鼠标靠近行的顶部)和第一列。

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

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

但我想有一个更好的解决方案。