Disbale the drag and drop in between two dyna tress

Question

I have Two Dyna tress. Want to have drag and drop within the tree but not in between the tress.Please guide me how to disbale the drag and drop in between the tress.

        $("#tree1")
        .dynatree(
                {
                    onActivate : function(node) {
                        alert("You activated " + node.data.title);
                    },
                    persist : true,
                    dnd : {
                        onDragStart : function(node) {
                            logMsg("tree.onDragStart(%o)", node);
                            return true;
                        },
                        onDragStop : function(node) { 
                            logMsg("tree.onDragStop(%o)", node);
                        },
                        autoExpandMS : 1000,
                        preventVoidMoves : true,

                        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);

                            if (node.isDescendantOf(sourceNode)) {
                                return false;
                            }

                            if (!node.data.isFolder && hitMode === "over") {
                                return "after";
                            }
                        },
                        onDrop : function(node, sourceNode, hitMode, ui,
                                draggable) {

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

                        },
                        onDragLeave : function(node, sourceNode) {

                            logMsg("tree.onDragLeave(%o, %o)", node,
                                    sourceNode);
                        }
                    },
                    children : [ 

                    {
                        title : "Public",
                        isFolder : true,
                        children : [ {
                            "title" : "Item 1"
                        }, {
                            "title" : "Folder 2",
                            "isFolder" : true,
                            "key" : "folder2",
                            "children" : [ {
                                "title" : "Sub-item 2.1",
                                "isFolder" : false
                            }, {
                                "title" : "Sub-item 2.2"
                            } ]
                        }, {
                            "title" : "Folder 3",
                            "isFolder" : true,
                            "key" : "folder3",
                            "children" : [ {
                                "title" : "Sub-item 3.1",
                                "isFolder" : false
                            }, {
                                "title" : "Sub-item 3.2",
                                "isFolder" : false
                            } ]
                        }, {
                            "title" : "Item 5"
                        } ]
                    } ]

                });

and the Tree2 is

        $("#tree2")
        .dynatree(
                {
                    onActivate : function(node) {
                        alert("You activated " + node.data.title);
                    },
                    persist : true,
                    dnd : {
                        onDragStart : function(node) {
                            logMsg("tree.onDragStart(%o)", node);
                            return true;
                        },
                        onDragStop : function(node) { 
                            logMsg("tree.onDragStop(%o)", node);
                        },
                        autoExpandMS : 1000,
                        preventVoidMoves : true,

                        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);

                            if (node.isDescendantOf(sourceNode)) {
                                return false;
                            }

                            if (!node.data.isFolder && hitMode === "over") {
                                return "after";
                            }
                        },
                        onDrop : function(node, sourceNode, hitMode, ui,
                                draggable) {

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

                        },
                        onDragLeave : function(node, sourceNode) {

                            logMsg("tree.onDragLeave(%o, %o)", node,
                                    sourceNode);
                        }
                    },
                    children : [ 

                    {
                        title : "Public",
                        isFolder : true,
                        children : [ {
                            "title" : "Item 1"
                        }, {
                            "title" : "Folder 2",
                            "isFolder" : true,
                            "key" : "folder2",
                            "children" : [ {
                                "title" : "Sub-item 2.1",
                                "isFolder" : false
                            }, {
                                "title" : "Sub-item 2.2"
                            } ]
                        }, {
                            "title" : "Folder 3",
                            "isFolder" : true,
                            "key" : "folder3",
                            "children" : [ {
                                "title" : "Sub-item 3.1",
                                "isFolder" : false
                            }, {
                                "title" : "Sub-item 3.2",
                                "isFolder" : false
                            } ]
                        }, {
                            "title" : "Item 5"
                        } ]
                    } ]

                });

Please guide me on how should i achieve that Tree1 Nodes can be DnD with in me Tree1 and Trre2 Nodes can be DnD with in Tree2. And restrict that Tree1 Nodes should not be dropped in Tree2 and vice versa.

Answer 1

You should use:

onDragEnter: function (targetNode, sourceNode) {
    // Prevent dropping a node from a foreign tree
    if (targetNode.tree !== sourceNode.tree) {
        return false;
    }
    return true;
}

It checks if the tree of the node that you want to move (sourceNode) is the same tree as the tree of the node where you want to move (targetNode). If the two trees are not the same it prevents dropping.