How can I save the order of the tree?

It's a little bit complicated to explain. I would like to save the position on which the tree has been repositioned, and then when the user opens the page again it will appear the way the user left it (I do not want to make it only for one user but for all, because only the admin is going to have access to it anyway). it sounds ununderstandable, that's why I made an example right below:

Simplifying:

1 - Get the order of the tree's elements that the user left

2 - Send it to my server as a text file (Probably Ajax)

enter image description here

Thus, when I reload the page or/and clean up the cache, it will still be in that position that I left. I want the "position" to be sent as a text file using ajax to my server. Is there a way to do it?

Thanks in advance.

<!DOCTYPE html>
<html>
<head>
	
	
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="./tree.jquery.js"></script>
	<link rel="stylesheet" href="./jqtree.css">
	<script src="./jquery-cookie/src/jquery.cookie.js"></script>
  
	

	<style>
		body{overflow-x:hidden}
		#navdata{width:auto; height:auto; flex:1; padding-bottom:1px;}
		#navgrid{width:50%; height:200px; overflow-x:hidden; overflow-y:scroll; border:solid 1px #79B7E7; background-color:white;}
        	#header{background-color: #79B7E7; width:100%; text-align: center;border: 1px solid white;}
      		.jqtree-element{background-color:#DDEBF7;border: 1px solid white;height:23px;color:red;}
      		.jqtree-tree .jqtree-title {color: black;}         
     		ul.jqtree-tree ul.jqtree_common {margin-left: 0px;}
      		ul.jqtree-tree .jqtree-toggler {color: #325D8A;}
      		ul.jqtree-tree .jqtree-toggler:hover {color: #3966df;text-decoration: none;}
      		.jqtree-tree .jqtree-title.jqtree-title-folder {margin-left: 0;}
      		span.jqtree-dragging {background: #79B7E7;}
      		ul.jqtree-tree li.jqtree-selected > .jqtree-element,ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#79B7E7));}
   	</style>

	
</head>
<body>
	<div id="navgrid">
      <div id="header">Header</div>
		<div id="tree1"></div>
	</div>  
</body>


	<script type="text/javascript">
	 var ExampleData = {}; 
	 	 ExampleData.data = [
	    {
	        label: 'node1', id: 1,
	        children: [
	            { label: 'child1', id: 2 },
	            { label: 'child2', id: 3 }
	        ]
	    },
	    {
	        label: 'node2', id: 4,
	        children: [
	            { label: 'child3', id: 5 }
	        ]
	    }
	];
	
	ExampleData.getFirstLevelData = function(nodes) {
    if (! nodes) {
        nodes = ExampleData.example_data;
    }

    var data = [];

    $.each(nodes, function() {
        var node = {
            label: this.label,
            id: this.id
        };

        if (this.children) {
            node.load_on_demand = true;
        }

        data.push(node);
    });

    return data;
}

ExampleData.getChildrenOfNode = function(node_id) {
    var result = null;

    function iterate(nodes) {
        $.each(nodes, function() {
            if (result) {
                return;
            }
            else {
                if (this.id == node_id) {
                    result = this;
                }

                if (this.children) {
                    iterate(this.children);
                }
            }
        });
    }

    iterate(ExampleData.example_data);

    return ExampleData.getFirstLevelData(result.children);
}
	
	$('#tree1').tree({
	    data: ExampleData.data,
	    autoOpen: false,
	    dragAndDrop: true
	    
	});
    
	</script>

</html>

Solution

I think earlier i got your question wrong. This will be your answer.

$(document).ready(function(){

//var data is a dynamic json file that should be created in the backend.
var data = [
    {
        label: 'node1', id: 1,
        children: [
            { label: 'child1', id: 2 },
            { label: 'child2', id: 3 }
        ]
    },
    {
        label: 'node2', id: 4,
        children: [
            { label: 'child3', id: 5 }
        ]
    }
];
$('#tree1').tree({
    data: data,
    autoOpen: true,
    dragAndDrop: true
});


console.log($('#tree1').tree('toJson')); //This will give you the loading jqtree structure.

    $('#tree1').bind(
    'tree.move',
    function(event) {
        event.preventDefault();
        // do the move first, and _then_ POST back.
        event.move_info.do_move();
        console.log($(this).tree('toJson')); //this will give you the latest tree.
//        $.post('your_url', {tree: $(this).tree('toJson')}); //this will post the json of the latest tree structure.
    }
);


});