jqueryui手风琴改变元素位置

这把小提琴有望帮助我解释我的问题。我需要类似但不同的功能

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

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

换言之，在搬迁之前，我们有： 1. 2. 3. 4. 5. 6. 七,

在这一举措之后，我们有： 2. 3. 4. 5. 6. 7. 一,

我需要像这样的东西： 7. 2. 3. 4. 5. 6. 一,

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

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

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（手风琴）不匹配，因为我上面描述的问题

到目前为止，我的解决方案是清空accordion并从模型中重新渲染/刷新它。这很有效。

---

我想知道有没有更干净的解决办法。也许我会渲染交换的元素，然后手动将它们插入手风琴。这有多困难，我会遇到什么问题？我是否会通过手动操作元素来破坏手风琴功能？

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

它只处理前后交换1-7,2-6,3-5，但不处理相邻的两个元素（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();

---

您可以将标题更改为交换sortable内的元素，或类似的内容，因为当前标题并不反映实际问题。（只是一个建议，以防其他人也会有同样的问题：））就是这样。按预期工作。