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

Question

I am using fancytree with sortable extensions and I found 2 problems which I am trying to fight for hours. Maybe someone might help me. The goal is to be able to sort between elements in the same nest level, but now I am only able to sort root nodes. Second think is more important and I have no idea why it works like that. When I am trying to get fancytree nodes (of course i would like to get them in current sorted order), all the time I get same order without relying on view display. I am using these event to get nodes: $('#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);
      }
    }
  });

});

And here is fiddle link: Link

Subhrajyoti Das · Accepted Answer · 2018-10-09T19:07:48.287

0

You need to add sortable to the child nodes also. Add the below code to fancytree initialization. This function basically observes child node expands and then activates sortable for the child nodes.

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

I have updated the jsfiddle also. Check the link: https://jsfiddle.net/3zmLfe1h/11/

Answer to your 2nd Question: I am not sure about it but I guess maybe fancytree is saving the order in some way and returning it to you whenever you are trying to get it. You can get all the values using jQuery and Sortable though.

edited Oct 09 '18 at 19:07

answered Oct 09 '18 at 18:44

Subhrajyoti Das

2,685
3
21
36

Thanks for the answer, I updated my code and now sorting works fine. I am still confused about getting these values using Sortable or jQuery because my example is far more complex and I am not only sorting this once but i want to get this sorted when user opens this tree another time. Anyway, thanks for help – piotrruss Oct 10 '18 at 08:57
@Piotr fancytree does not allow you arrange tree elements permanently. If you want to have a sortable and rearrangeable structure i would suggest you use `bootstrap` to align the elements and then use sortable on them. I have done and it works. – Subhrajyoti Das Oct 10 '18 at 09:49
Do you have any prototype with working "tree view" done on bootstrap? I would be glad if you have – piotrruss Oct 10 '18 at 15:00
Don't have a working prototype. But it can be done. Try rendering a tree structure using bootstrap. – Subhrajyoti Das Oct 10 '18 at 18:21
Ok, I will try. Thanks – piotrruss Oct 11 '18 at 10:47

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

1 Answers1