glisser-déposer de / à dynatree

Question

J'essaie de faire glisser des données d'un dynatre et de le laisser tomber à un autre dynatree.Dans la documentation, un exemple montre comment déplacer un nœud dans le même arbre.Est-il possible de déplacer un nœud et de le mettre dans le deuxième dynatre avec tout ce qu'elle est l'option ??

premier arbre a:

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

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

et le deuxième arbre:

 $("#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;
                            }
}
        });

Merci d'avance

Answer 1

afaik, actuellement Dynatree ne prend pas en charge le nœud de déplacement entre différents arbres.Cependant, vous pouvez copier le nœud de Tree1 et ajouter un noeud copié à Tree2.Après cela, vous pouvez supprimer le nœud à Tree1.Avec cette approche, vous pouvez imiter le comportement du nœud mobile entre les arbres.

donc au lieu d'utiliser Sourcenode.Move (nœud, hitmode), vous pouvez utiliser ceci:

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

node.addChild(copyNode);

J'espère que cette aide.

Answer 2

Vous pouvez le faire, en fait.Vous placez simplement chaque dynatre dans DIV et faites que Div Dresspable.Le DOM peut analyser l'objet de nœud Dynatree de la goutte dressable, car c'est ce que Dynatree attache à l'événement.

Vous pouvez voir un échantillon de travail ici .

Answer 3

dynatree 1 (dragge)

$("#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 (dressable)

$("#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-"
        });

Essayez ce code Ça marche.J'ai fait la même chose avant.