Question

我有两个具有拖放功能的TreeViews结构。可以将两个Treeviews中的节点相互拖放。

如果我将某些内容从源位置拖动到目标位置，我希望在控制台中更新目标列表

作为参考，您可以查看link here。

在本次DEMO中，我可以将某个类别的内容移动到另一个类别，但我想捕获包含所有子类别的更新类别列表。

以下是我的代码片段

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

Kendo UI TreeView Drag and Drop获取目标（已删除）的treeview对象

1 个答案: