jQuery sortable rows and columns grid

Question

jQuery sortable을 사용하여 정렬 가능한 그리드를 만들려고합니다. 여기 내 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> 

하고하는 자바 스크립트입니다 :

I 행뿐만 아니라 개별 열을 정렬 할 수 있도록하려면

$("#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>