0

同じページに 2 つのダイナツリーがあります。ツリー 1 にはさまざまな数のノードがあり、ツリー 2 は空です。ツリー 1 からノードをドラッグし、ツリー 2 にドロップしたいと思います。ツリー 2 が空でない限り、すべて正常に動作します。ただし、ツリー 2 が空の場合、まったく機能していません。これが私のコードです：

$('#tree1').dynatree({
    dnd: {
        onDragStart: function (node) {
            return true;
        }
    }
});

$('#tree2').dynatree({
    dnd: {
        onDragEnter: function (node, sourceNode) {
            return true;
        },
        onDrop: function (node, sourceNode, hitMode, ui, draggable) {
            var copyNode = sourceNode.toDict(true, function (dict) {
                delete dict.key;
            });
            node.addChild(copyNode);
        }
    }
});

誰でもこの問題を解決する方法を教えてもらえますか? 事前にサンクス。

4

2 に答える 2

1

dynatreeソースコード（バージョン1.2.0）を読んだ後、ソースコードを変更せずに空のツリーにノードを追加することはできないことがわかりました。これは、ソースノードをターゲットツリーにドロップしようとすると、実際にはターゲットツリーではなくターゲットノードの前/後にソースノードがドロップされるためです。したがって、ツリーにノードがない場合、dynatreeは機能しません。

于 2012-05-15T06:33:41.450 に答える
1

私はこのようなことをしました：

var tree1Dragging = false,
    tree2Over = false;

$('#tree1').dynatree({
    dnd : {
        onDragStart : function(node) {
            tree1Dragging = true;
            return true;
        },
        onDragStop : function(node) {
            critDrag = false;

            if (tree2Over) {
                //TODO do your drop to tree2 process here (get the root and append the "node" to it for example)
            }
        }
    }
});

$('#tree2').dynatree({
    dnd : {
        onDragEnter : function(node, sourceNode) {
            return true;
        },
        onDrop : function(node, sourceNode, hitMode, ui, draggable) {
            var copyNode = sourceNode.toDict(true, function(dict) {
                delete dict.key;
            });
            node.addChild(copyNode);
        }
    }
});

// Add mouse events to know when we are above the tree2 div
$("#tree2").mouseenter(function() {
    if (tree1Dragging) {
        tree2Over = true;
    }
}).mouseleave(function(){
    tree2Over = false;
});
于 2013-06-27T12:59:42.683 に答える