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/

JQuery可排序和可拖动 - 水平和垂直移动

1 个答案: