水平和垂直可排序的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

回答

相關問題