drag and drop from/to dynatree

1
votes

I'm trying to drag data from a dynatree and drop it to another dynatree. In the documentation an example shows how to move a node in the same tree. Is it possible to move a node and put it in the second dynaTree with all it's option??

first tree has :

    $("#Tree1).dynatree({
 dnd: {
                    onDragStart: function (node) {

                        logMsg("tree.onDragStart(%o)", node);
                        return true;
                    },
});

and the second tree:

 $("#Tree2").dynatree({
        dnd :{
        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;
                            }
}
        });

thanks in advance

3
jquerydynatreejquery-dynatree
Haven't you run the code yet ? Or what exactly is the problem ? – mas-designs
yes i did run it,and an exception : "Microsoft JScript runtime error: Exception thrown and not caught" in the move function in the js file appears – HRI
This Demo seems to implement what you're looking for. – Giorgio Luparia

3 Answers

1
votes

AFAIK, currently dynatree doesn't support move node between different trees. You may, however, copy node from tree1 and add copied node to tree2. After that, you can delete node in tree1. With this approach, you can mimic the behaviour of moving node between trees.

So instead of using sourceNode.move(node, hitMode), you can use this:

var copyNode = sourceNode.toDict(true, function (dict) {
    delete dict.key;
});

node.addChild(copyNode);

Hope this help.

1
votes

You can do this, actually. You simply place each dynatree in div and make that div droppable. The DOM can parse the dynatree node object from the droppable, as that's what dynatree is attaching to the event.

You can see a working sample here.

0
votes

dynatree 1(draggable)

$("#tree").dynatree({
dnd: {
                revert: false, // true: slide helper back to source if drop is rejected
                onDragStart: function(node) {

                },
                onDragStop: function(node) {

                }
            },
            cookieId:"dynatree-cb1",
            idPrefix:"dynatree-cb1-"
        });

dynatree 2(Droppable)

$("#tree2").dynatree({
dnd: {

                autoExpandMS: 1000,
                preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                onDragEnter: function(node, sourceNode) {

                    if(node.data.isFolder){
                      return false;
                    }
                    return true;
                    // return "over";
                  },
                  onDragOver: function(node, sourceNode, hitMode) {


                  },
                  onDrop: function(node, sourceNode, hitMode, ui, draggable) {

                    logMsg("tree.onDrop(%o, %o)", node, sourceNode);
                    var copynode;
                    if(sourceNode) {
                      copynode = sourceNode.toDict(true, function(dict){
                        dict.title = "Copy of " + dict.title;
                        delete dict.key; // Remove key, so a new one will be created
                      });
                    }else{
                      copynode = {title: "This node was dropped here (" + ui.helper + ")."};
                    }
                    if(hitMode == "over"){
                      // Append as child node
                      node.addChild(copynode);
                      // expand the drop target
                      node.expand(true);
                    }else if(hitMode == "before"){
                      // Add before this, i.e. as child of current parent
                      node.parent.addChild(copynode, node);
                    }else if(hitMode == "after"){
                      // Add after this, i.e. as child of current parent
                      node.parent.addChild(copynode, node.getNextSibling());
                    }
                  },
                  onDragLeave: function(node, sourceNode) {
                    /** Always called if onDragEnter was called.
                     */
                    logMsg("tree.onDragLeave(%o, %o)", node, sourceNode);
                  }
                },
            cookieId:"dynatree-cb2",
            idPrefix:"dynatree-cb2-"
        });

Try this code it works. I did the same before.