Javascript fancytree-可排序获取节点顺序，仅在同一嵌套级别排序

我正在使用fancytree和可排序扩展，我发现了两个问题，我正在努力解决这两个问题。也许有人能帮我。 目标是能够在同一嵌套级别的元素之间进行排序，但现在我只能对根节点进行排序。 第二个想法更重要，我不知道为什么它会这样。当我尝试获取fancytree节点时（当然我希望以当前排序的顺序获取它们），我总是获得相同的顺序，而不依赖于视图显示。 我使用这些事件获取节点：

$（“#树”）.fancytree（“getTree”）.toDict（）

html:

---

这里是fiddle链接：

您还需要将sortable添加到子节点。将下面的代码添加到fancytree初始化中。此函数主要观察子节点展开，然后激活子节点的可排序性

expand: function() {
    $('.fancytree-has-children').siblings().sortable();
},

我还更新了JSFIDLE。检查链接：

---

回答你的第二个问题：我不确定，但我猜fancytree可能会以某种方式保存订单，并在你试图获得订单时将其退还给你。不过，您可以使用jQuery和Sortable获取所有值。

谢谢您的回答，我更新了代码，现在排序工作正常。我仍然对使用Sortable或jQuery获取这些值感到困惑，因为我的示例要复杂得多，我不仅要对这些值进行一次排序，而且希望在用户下次打开此树时对其进行排序。无论如何，谢谢你的帮助help@Piotrfancytree不允许永久排列树元素。如果您想要一个可排序和可重新排列的结构，我建议您使用

bootstrap

来对齐元素，然后对它们使用sortable。我已经做过了，它可以工作了。你们有没有在引导程序中使用“树视图”的原型？如果你没有工作的原型，我会很高兴。但这是可以做到的。尝试使用引导呈现树结构。好的，我将尝试。谢谢

$(function() { // on page load
  $("#tree").fancytree({
    debugLevel: 0,
    selectMode: 1,
    extensions: ["dnd"],
    source: [{
        title: "Node 1",
        key: "1",
        "baloney": 44
      },
      {
        title: "Node 2",
        key: "2432"
      },
      {
        title: "Folder 2",
        key: "2",
        folder: true,
        children: [{
            title: "Node 2.1",
            key: "3",
            myOwnAttr: "abc"
          },
          {
            title: "Node 2.2",
            key: "4"
          },
                    {
            title: "Node 2.3",
            key: "5"
          },          {
            title: "Node 2.4",
            key: "6"
          },          {
            title: "Node 2.5",
            key: "7"
          }
        ]
      }
    ],
dnd5: {
                    preventForeignNodes: true,
                    preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
                    preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                    dragStart: function(node, data) {

                        return true;
                    },
                    dragEnter: function(node, data) {

                        return true;
                    },
                    dragDrop: function(node, data) {
                        data.otherNode.moveTo(node, data.hitMode);
                    },
                    activate: function(event, data) {
                    },
                    draggable: {
                        appendTo: "body",
                        connectToSortable: '#tree > ul',
                        containment: "parent",
                        revert: "invalid"
                    }
                },
  });

  $('#tree > ul').sortable({
    connectWith:"#fancytree",
    out: function(event, ui) {
      if (event.originalEvent.type === "mousemove") {
        $(ui.item).data('drugout', true);
      }
    }
  });

});

expand: function() {
    $('.fancytree-has-children').siblings().sortable();
},