검도 UI TreeView 끌기 및 놓기 대상 (놓기) 트리 뷰 객체 가져 오기

Question

두 개의 TreeViews 구조에 드래그 앤 드롭 기능이 있습니다. 두 Treeview의 노드를 서로 드래그 앤 드롭 할 수 있습니다. 내가 목적지 소스에서 일부 콘텐츠를 드래그하고있는 경우

는 난 당신이 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을 만들었습니다.

두 개의 Treeviews 모두 dragend event을 함수에 바인드해야하며 거기에서 대상 Treeview 목록을 가져올 수 있습니다. 내 질문 봐주십시오 업데이트 한

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