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/