jQuery sortierbare Zeilen und Spalten Raster

Question

Ich versuche, ein sortierbares Raster mit jQuery sortierbar zu erstellen. Hier ist mein 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> 

und hier ist javascript:

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

Ich möchte in der Lage sein, Zeilen zu sortieren sowie einzelne Spalten. Sortieren von Zeilen funktioniert gut, aber aus irgendeinem Grund passiert nichts mit Spalten. Die Idee ist, "innere" Elemente frei in jeder Spalte zu bewegen.

Answer 1

Ich denke, Sie könnten davon ausgehen, dass Sortierbar ein Raster für Sie erstellt. Es tut nicht. Wenn Sie sich das Beispiel ansehen, sehen Sie zwei unterschiedliche Container für jede Spalte. Ich habe eine sehr einfache von divs gemacht und verwendet CSS, um es wie zwei Spalten aussehen zu lassen. Ich gehe davon aus, dass Sie die Notwendigkeit an Ort und Stelle haben wird.

wenn ich es richtig gespeichert, sollten Sie in der Lage sein, um es https://jsfiddle.net/bindrid/f2pcc9wL/ zu sehen arbeiten

<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>