拖放到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

據我所知，目前dynatree不支持不同的樹之間移動節點。但是，您可以從樹1複製節點並將複製的節點添加到樹2。之後，您可以刪除tree1中的節點。通過這種方法，您可以模擬樹之間移動節點的行爲。

因此，而不是使用sourceNode.move（節點，hitMode），您可以使用此：

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

node.addChild(copyNode); 

希望這有助於。

Answer 2

實際上，您可以這樣做。您只需將每個dynatree放在div中並使該div可放下。 DOM可以從可放置的對象中解析dynatree節點對象，因爲dynatree附加在事件上。

你可以看到一個工作樣品here。

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（可投放）

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

嘗試此代碼它的工作原理。我之前也是這樣做的。