jQuery可排序的行和列的網格

Question

我試圖創建一個使用jQuery排序的可排序網格。這裏是我的html：

<div id ="container"> 
<div class="row"> 
    <div class="column"> 
    <div class="inner"> 1 </div> 
    </div> 
    <div class="column"> 
    <div class="inner">2</div> 
    </div> 
</div> 
<div class="row"> 
    <div class="column"> 
    <div class="inner">3</div> 
    </div> 
</div> 
<div class="row"> 
    <div class="column"> 
    <div class="inner">4</div> 
    </div> 
    <div class="column"> 
    <div class="inner">5</div> 
    </div> 
</div> 
</div> 

這裏是JavaScript的：

$("#container").sortable(); 
$("#container .inner").sortable({connectWith: ".column"}); 

我希望能夠行以及各列進行排序。排序行工作正常，但由於某些原因列沒有發生。這個想法是在任何列中自由移動「內部」元素。

Answer 1

我想你可能會認爲Sortable爲你創建了一個網格。它不是。 另外，如果你看樣本，你會看到每個列有兩個不同的容器。我做了一個非常簡單的div，並使用css使它看起來像兩列。我認爲你將有需要包括在內。

，如果我救了它的權利，你應該能夠看到它的工作https://jsfiddle.net/bindrid/f2pcc9wL/

<style> 
    .container{ width:60px} 
    .col1{ width:20px; 
     float:left; } 
    .col2{ width:20px; float:right} 
    .cell{width:15px; border: thin solid black} 
</style> 
<script> 
    $(function() { 
    $("#box1, #box2" ).sortable({connectWith: '.both'})}); 
</script> 
<div class='container'> 
    <div id='box1' class='col1 both'> 
     <div class='cell'>1</div> 
     <div class='cell'>2</div> 
     <div class='cell'>3</div> 
    </div> 

    <div id='box2' class='col2 both'> 
     <div class='cell'>4</div> 
     <div class='cell'>5</div> 
     <div class='cell'>6</div> 
    </div> 
</div>