0

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

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

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

换句话说，在移动之前，我们有： 1 2 3 4 5 6 7

在那之后我们有： 2 3 4 5 6 7 1

我需要类似的东西：7 2 3 4 5 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（手风琴）不匹配，因为我上面描述的问题。

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

4

1 回答 1

1

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

它只处理来回交换 1-7,2-6,3-5，但不能处理彼此相邻的 2 个元素。（12,56 等...），如果你不能通过明天我会试一试:)

更新

我的解决方案有效，但它不是最漂亮的……</p> 

$("#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();
于 2013-07-04T00:42:15.363 回答