JQuery Sortable and Draggable - 移動水平和垂直

Question

我有一組屏幕排列成網格形式（比如3x3矩陣）。

<div>Part_1_1 Part_1_2 Part_1_3</div>

<div>Part_2_1 Part_2_2 Part_2_3</div>

<div>Part_3_1 Part_3_2 Part_3_3</div>

我需要能夠移動的每個行/列是垂直和水平和我不應該能夠移動單個元素。 每一行都被封閉在一個div中（依次將每個部分包含在它自己的div容器中）。因此，我可以垂直移動每一行。

除此之外，我還需要水平移動每列。我不知道該怎麼做。

Answer 1

也許你可以嘗試在行級應用排序，然後在回調中更新其餘行。

您還可以將其設計爲具有垂直行的外觀。

HTML：

<ul id="sortable"> 
     <li class="ui-state-default"><span class="col1">11</span><span class="col2">12</span><span class="col3">13</span></li> 
     <li class="ui-state-default"><span class="col1">21</span><span class="col2">22</span><span class="col3">23</span></li> 
     <li class="ui-state-default"><span class="col1">31</span><span class="col2">32</span><span class="col3">33</span></li> 
</ul> 

的JavaScript：

$("#sortable li").sortable({ 
    stop: function(event, ui) { 
     var index = ui.item.index(); 
     $("."+$(ui.item).attr("class")).each(function(){ 
      if(this!=ui.item[0]){ 
       var list = $(this).closest("li"); 
       $(this).detach() 
       if($(list.children().get(index)).length>0) 
        $(list.children().get(index)).before(this); 
       else 
        $(list).append(this); 
      } 
     }) 
    } 
}); 

我加入小提琴例如： http://jsfiddle.net/UAcC7/536/