Kendo UI樹視圖拖放獲取目標（丟棄）treeview對象

Question

我有兩個TreeViews結構的拖放功能。 Treeviews中的節點可以相互拖放。

如果我拖着從源到目的地的一些內容，我想在控制檯

目的地的更新列表，以供參考，您可以檢查link here。

在這個演示中，我可以從一個類別移動到另一個類別，但我想捕獲更新的包含所有子類別的類別列表。

這裏是我的代碼

<div id="example"> 
     <div class="demo-section k-content"> 
      <h4>Treeview One</h4> 
      <div id="treeview-left"></div> 
      <h4 style="padding-top: 2em;">Treeview Two</h4> 
      <div id="treeview-right"></div> 
     </div> 

     <script> 
      $("#treeview-left").kendoTreeView({ 
       dragAndDrop: true, 
       dataSource: [ 
        { text: "Furniture", expanded: true, items: [ 
         { text: "Tables & Chairs" }, 
         { text: "Sofas" }, 
         { text: "Occasional Furniture" } 
        ] }, 
        { text: "Decor", items: [ 
         { text: "Bed Linen" }, 
         { text: "Curtains & Blinds" }, 
         { text: "Carpets" } 
        ] } 
       ] 
      }); 

      $("#treeview-right").kendoTreeView({ 
       dragAndDrop: true, 
       dataSource: [ 
        { text: "Storage", expanded: true, items: [ 
         { text: "Wall Shelving" }, 
         { text: "Floor Shelving" }, 
         { text: "Kids Storage" } 
        ] 
        }, 
        { text: "Lights", items: [ 
         { text: "Ceiling" }, 
         { text: "Table" }, 
         { text: "Floor" } 
        ] 
        } 
       ] 
      }); 
     </script> 

片斷我怎樣才能做到這一點？ 謝謝

Answer 1

我已經創建了一個JsFiddle DEMO here。

您需要將兩個TreeView的dragend event綁定到一個函數，然後才能從那裏獲取目標Treeview列表。下面是從DEMO的片段：我已經更新了我的問題，請看看

function tree_dragend(e) { 
    alert("See your console"); 
    console.log("Drag end sourceNode = ", e.sourceNode, "dropPosition = ", e.dropPosition, "destinationNode = ", e.destinationNode); 

    var destinationTreeviewDOMElement = $(e.destinationNode).closest("div.k-treeview"); 
    console.log("destinationTreeviewDOMElement = ", destinationTreeviewDOMElement); 

    var destinationTreeview = $(destinationTreeviewDOMElement).data("kendoTreeView"); 
    console.log("destinationTreeview = ", destinationTreeview); 

    console.log("destinationTreeviewData = ", destinationTreeview.dataSource.data()); 
} 

var treeview_left = $("#treeview-left").data("kendoTreeView"); 
var treeview_right = $("#treeview-right").data("kendoTreeView"); 

treeview_left.bind("dragend", tree_dragend); 
treeview_right.bind("dragend", tree_dragend);