how to save dynatree structure after drag and drop

Question

I can't figure out how to save the new dynatree after dragging and dropping node to it.

I have 2 dynatree and I'm dragging from one to another but i don't know if i can get the info of the structure of the new tree. my first tree :

$("#tree1").dynatree({

                title: "tree",
                children: [{ title: "tree1", isFolder: true}],
                dnd: {
                    onDragStart: function (node) {

                        logMsg("tree.onDragStart(%o)", node);
                        return true;
                    },
                    onDrop: function (node, sourceNode, hitMode, ui, draggable) {

                        logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
                        sourceNode.move(node, hitMode);
                    }
                }


            });

and the second :

$("#Tree2").dynatree({
                title: "Tree",

                children: [{ title: "MyTree", isFolder: true}],


                isLazy: true,

                dnd: {
                    onDragStart: function (node) {

                        logMsg("tree.onDragStart(%o)", node);
                        return true;
                    },
                    onDrop: function (node, sourceNode, hitMode, ui, draggable) {

                        logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
                        sourceNode.move(node, hitMode);
                    },
                    onDragEnter: function (node, sourceNode) {

                        logMsg("tree.onDragEnter(%o, %o)", node, sourceNode);
                        return true;
                    },
                    onDragOver: function (node, sourceNode, hitMode) {

                        logMsg("tree.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
                    },

                    onDragLeave: function (node, sourceNode) {

                        logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
                    },
                    onDrop: function (node, sourceNode, hitMode, ui, draggable) {

                        logMsg("tree.onDrop(%o, %o)", node, sourceNode);
                        var copynode;
                        var rootNode = $("#OrganizationTree").dynatree("getRoot");
                        if (sourceNode && (node.data.title === 'Organization' || node !== rootNode)) {
                            copynode = sourceNode.toDict(true, function (dict) {
                                dict.title = dict.title;
                                dict.key = sourceNode.data.key;
                                node.data.isFolder = true;

                            });
                        } else {
                            alert(" please drop your node into the organization");
                        }
                        if (hitMode == "over") {
                            // Append as child node
                            node.addChild(copynode);
                            sourceNode.remove();       
                        }
                    }
                }

            });

how to save tree2 structure? thanks in advance

Answer 1

You could use something like this:

  dnd: {
          onDrop: function(node, sourceNode, hitMode, ui, draggable) {
            /** This function MUST be defined to enable dropping of items on
             *  the tree.
             */
            sourceNode.move(node, hitMode);
            var currentTree = $("#tree").dynatree("getTree").toDict();
            $.post("forajax.php", { recieved: currentTree},
               function(data) {
                 $("#output").html(data);
             });
          }
        }

And source of forajax.php

<?
function noFalseMulti($var) 
/*
*This function will remove from array key containing 'false' of 'null'  (empty keys)
*
*I have realized, if there are this data it shows error-I don't know why
*/
  {
  $var=array_filter($var, 'noFalse');
  foreach($var as $key => $value)
    {
    if(is_array($var[$key]))
      {
      $var[$key]=noFalseMulti($var[$key]);
      }
    }
  return $var;
  }

$dataToSave=serialize(noFalseMulti($_POST['recieved']));
?>

You save the data wherever you want to. And when you need them again, use this:

$("#tree").dynatree({
        initAjax: {url: "createTree.php",
                   data: {//key: "root", 
                          // Optional arguments to append to the url
                          //mode: "all"
                          }
                   },

Ant the createTree.php source

<?
$yourSavedData=''; //place here the data you have saved before
$array=unserialize($yourSavedData);
echo json_encode($array);
?>

I am not sure if I explained it well enough - if not just reply here.

Hope it will help you or somebody else.