Arrastrar y soltar desde / hacia Dynatree

Question

Estoy tratando de arrastrar datos de un Dynatree y dejarlo caer a otro Dynatree.En la documentación, un ejemplo muestra cómo mover un nodo en el mismo árbol.¿Es posible mover un nodo y ponerlo en el segundo Dynatree con toda la opción?

El primer árbol tiene:

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

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

y el segundo árbol:

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

gracias de antemano

Answer 1

AFAIK, actualmente Dynatree no admite el nodo Mover entre diferentes árboles.Sin embargo, puede copiar el nodo de árbol1 y agregar un nodo copiado a TREE2.Después de eso, puedes eliminar el nodo en Tree1.Con este enfoque, puede imitar el comportamiento del nodo en movimiento entre los árboles.

En lugar de usar SOURCENODE.MOVE (NODE, HITMODE), puede usar esto:

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

node.addChild(copyNode);

Espero esta ayuda.

Answer 2

Puedes hacer esto, en realidad.Simplemente colocas a cada Dynatree en DIV y haz que Div Droppable.El DOM puede analizar el objeto de nodo Dynatree desde el gotpable, ya que es lo que Dynatree está adjuntando al evento.

Puede ver una muestra de trabajo aquí .

Answer 3

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 (gappable)

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

Pruebe este código que funciona.Hice lo mismo antes.