Question

这个小提琴有望帮助我解释我所遇到的问题。我需要类似但不同的功能。 http://jsfiddle.net/HgAQu/1856/

当您拖动项目时，它们确实会改变位置，但我需要其他功能。我需要交换职位。

如示例所示，当您在第7项上移动第1项时，它们不会改变位置。会发生的是第一项是最后一项，而项目7在第一项之前

换句话说，我们有： 1 2 3 4 五 6 7

在此之后我们有： 2 3 4 五 6 7 1

我需要这样的东西： 7 2 3 4 五 6 1

我正在渲染所有元素并将它们插入手风琴中，所以我可以用它们做几乎所有的事情。

我使用以下代码来获得第一次开始移动和结束移动。而这些数字是准确的。这是我使用的代码：

accordion({
            header: "> div > h3",
            collapsible: true                      
        }).sortable({
              axis: "y",
              handle: "h3",                  
              start: function (event, ui) {
                  ui.item.startPos = ui.item.index();
              },
              stop: function (event, ui) {
                  var start =  ui.item.startPos;
                  var end = ui.item.index();
              }
        });

这种变化反映在模型上，我只是交换价值（骨干）。但是UI（手风琴）不匹配，因为我上面描述的问题。

我到目前为止的解决方案是清空手风琴并从模型中重新渲染/刷新它。这样可行。我想知道是否有更清洁的解决方案。也许我渲染交换元素并在手风琴中手动插入它们。这有多难，我可以得到什么样的问题？我会通过手动操作元素来破坏手风琴的功能吗？

Answer 1

这个解决方案并不完美，但是一个很好的注意点：jsfiddle

~~它只处理交换1-7,2-6,3-5而不是彼此相邻的2个元素。（12,56等等），如果可以的话明天我会弄清楚，我会试一试：）~~

<强>更新

我的解决方案有效，但它并不是最漂亮的......

$("#sortable").sortable({

start: function (event, ui) {
    ui.item.startPos = ui.item.index();
},
stop: function (event, ui) {
    // handle swapping from bottom to top( 7 -> 1)
    if (ui.item.startPos > ui.item.index()) {
        // when items are next to each other, don't swap
        if ((ui.item.startPos - ui.item.index()) == 1) return;
        $("li").eq(ui.item.startPos).after(ui.item.next());
    } else {
        // when items are next to each other, don't swap
        if ((ui.item.index() - ui.item.startPos) == 1) return;
        // handle swapping from top to bottom(1 -> 7)
        $("li").eq(ui.item.startPos).before(ui.item.prev());
    }
}
});
$("#sortable").disableSelection();

Jquery UI手风琴改变元素位置

1 个答案: