javascript - JQuery Sortable 和 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); 
            }
        })
    }
});

我添加了 fiddle 示例: http://jsfiddle.net/UAcC7/536/