fancytree

Question

我正在使用带有可排序扩展的 fancytree，我发现了 2 个问题，我试图解决这些问题几个小时。也许有人可以帮助我。目标是能够在同一嵌套级别的元素之间进行排序，但现在我只能对根节点进行排序。第二个想法更重要，我不知道为什么会这样。当我试图获取 fancytree 节点时（当然我想以当前排序的顺序获取它们），我总是得到相同的顺序而不依赖视图显示。我正在使用这些事件来获取节点：$('#tree').fancytree("getTree").toDict()

html:

<div id="tree"></div>

Javascript:

$(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);
      }
    }
  });

});

这里是 fiddle link: Link

Answer 1

您还需要为子节点添加 sortable。将以下代码添加到 fancytree 初始化。这个函数主要是观察子节点展开然后为子节点激活sortable

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

我也更新了 jsfiddle。检查link：https://jsfiddle.net/3zmLfe1h/11/

回答您的第二个问题：我不确定，但我想也许 fancytree 正在以某种方式保存订单并在您尝试获取订单时将其返回给您。您可以使用 jQuery 和 Sortable 获取所有值。

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

fancytree - sortable getting the order of nodes, sorting in same nest level only

javascript

jquery

treeview

jquery-ui-sortable