gpt4 book ai didi

javascript - Kendo UI TreeView Drag and Drop 获取目标(拖放) Treeview 对象

转载 作者:行者123 更新时间:2023-11-30 21:08:19 27 4
gpt4 key购买 nike

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

如果我将一些内容从源拖到目标,我想在控制台中更新目标列表

引用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>

我怎样才能做到这一点?谢谢

最佳答案

我创建了一个 JsFiddle DEMO here .

您需要绑定(bind) dragend event将您的两个 Treeviews 转换为一个函数,然后您可以从那里获取目标 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);

关于javascript - Kendo UI TreeView Drag and Drop 获取目标(拖放) Treeview 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46402541/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com