空のdynatreeにノードをドロップする方法

Question

同じページに2つのdynatreeがあります。ツリー1はさまざまな数のノードを持ち、ツリー2は空です。ツリー1からノードをドラッグしてツリー2にドロップしたいと思います。ツリー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); 
     } 
    } 
}); 

誰もこの問題を解決する方法を教えてもらえますか？あらかじめThanx。

Answer 1

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

Answer 2

私はこのようなものでした：

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