Kendo UI TreeView:如何避免将节点重新放置到其父节点?
Kendo UI TreeView: how to avoid re-dropping the node to its parent?
以下代码片段禁止在特定条件下删除节点。禁止节点被丢弃到它自己的父节点的条件是什么? (即节点未移动)。默认情况下,TreeView 允许此行为。
<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "foo", items: [
{ text: "bar" },
{ text: "baz" }
] }
]
});
var treeview = $("#treeview").data("kendoTreeView");
treeview.bind("drag", function(e) {
if (condition1 == false) {
// deny the drop
e.setStatusClass("k-denied");
}
});
</script>
如果你只需要防止拖到它自己的父级上,你可以实现条件为:
// Get reference to target item
var tgt = this.dataItem(e.dropTarget);
// Get reference to parent item of the one being dragged
var parent = this.dataItem(this.parent(e.sourceNode));
// If they have the same uid then they are the same and condition should be false
var condition1 = (parent.uid === tgt.uid);
if (condition1 == true) {
// deny the drop
e.setStatusClass("k-denied");
}
在此处查看实际效果:
$(document).ready(function() {
$("#treeview").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "foo", items: [
{ text: "bar" },
{ text: "baz" }
] }
]
});
var treeview = $("#treeview").data("kendoTreeView");
treeview.bind("drag", function(e) {
var tgt = this.dataItem(e.dropTarget);
var parent = this.dataItem(this.parent(e.sourceNode));
console.log(parent.uid, tgt.uid, parent.uid === tgt.uid);
var condition1 = (parent.uid !== tgt.uid);
if (condition1 == false) {
// deny the drop
e.setStatusClass("k-denied");
}
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<div id="treeview"></div>
以下代码片段禁止在特定条件下删除节点。禁止节点被丢弃到它自己的父节点的条件是什么? (即节点未移动)。默认情况下,TreeView 允许此行为。
<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "foo", items: [
{ text: "bar" },
{ text: "baz" }
] }
]
});
var treeview = $("#treeview").data("kendoTreeView");
treeview.bind("drag", function(e) {
if (condition1 == false) {
// deny the drop
e.setStatusClass("k-denied");
}
});
</script>
如果你只需要防止拖到它自己的父级上,你可以实现条件为:
// Get reference to target item
var tgt = this.dataItem(e.dropTarget);
// Get reference to parent item of the one being dragged
var parent = this.dataItem(this.parent(e.sourceNode));
// If they have the same uid then they are the same and condition should be false
var condition1 = (parent.uid === tgt.uid);
if (condition1 == true) {
// deny the drop
e.setStatusClass("k-denied");
}
在此处查看实际效果:
$(document).ready(function() {
$("#treeview").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "foo", items: [
{ text: "bar" },
{ text: "baz" }
] }
]
});
var treeview = $("#treeview").data("kendoTreeView");
treeview.bind("drag", function(e) {
var tgt = this.dataItem(e.dropTarget);
var parent = this.dataItem(this.parent(e.sourceNode));
console.log(parent.uid, tgt.uid, parent.uid === tgt.uid);
var condition1 = (parent.uid !== tgt.uid);
if (condition1 == false) {
// deny the drop
e.setStatusClass("k-denied");
}
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<div id="treeview"></div>