水平和垂直可排序的divs

我想用可排序的网格得到我的问题的答案。我有两行，都包含3列。水平和垂直可排序的divs

<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

来源

2017-06-08 Elvira

我还挺使用 '项目' 和一个占位符攻击我的问题DIV。以某种方式使用placeholderdiv使我能够选择行块。现在我可以选择一行（通过按住鼠标靠近行的顶部）和第一列。

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

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

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

来源

2017-06-08 14:18:41 Elvira

哦，对了，我误会了。我的回答是毫无意义的：P – WizardCoder

这是做你想做的。我已经更改了布局，所以列都有相同的父级，然后使用下面的来清除它们。

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

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

来源

2017-06-08 14:26:14 WizardCoder

Np，感谢您的期待。但这不是我想要的哈哈。我希望能够垂直排序行（能够选择行并向上或向下拖动它），并且仍然能够水平排列列。 – Elvira

水平和垂直可排序的divs

回答

相关问题