Dynatree에서 끌어서 떨어지십시오

Question

Dynatree에서 데이터를 끌어서 다른 Dynatree로 떨어 뜨리려고합니다.문서에서 예제는 동일한 트리에서 노드를 이동하는 방법을 보여줍니다.노드를 이동하고 두 번째 Dynatree에 두 번째 다이나 트리에 넣을 수 있습니까?

첫 번째 트리가 있습니다 :

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

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

.

및 두 번째 트리 :

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

.

미리 감사드립니다

Answer 1

afaik, 현재 Dynatree는 다른 나무들 사이의 이동 노드를 지원하지 않습니다.그러나 Tree1에서 노드를 복사하고 복사 된 노드를 Tree2에 추가 할 수 있습니다.그런 다음 Tree1에서 노드를 삭제할 수 있습니다.이 접근 방식을 사용하면 트리 간의 이동 노드의 동작을 모방 할 수 있습니다.

sourcenode.move (노드, 히트 모드)를 사용하는 대신 다음을 사용할 수 있습니다.

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

node.addChild(copyNode);

.

이 도움이되기를 바랍니다.

Answer 2

실제로이 작업을 수행 할 수 있습니다.당신은 단순히 DIV에 각 DYNATREE를두고 DIV를 droppable로 만듭니다.DOM은 DynaTree가 이벤트에 첨부 된 것과 같이 DropPable에서 Dynatree 노드 객체를 구문 분석 할 수 있습니다.

작업 샘플 여기 .

를 볼 수 있습니다.

Answer 3

dynatree 1 (끌기)

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

.

이 코드를 사용해보십시오.나는 전에 똑같이했다.