kendo-ui - Kendo UI TreeView : how to avoid re-dropping the node to its parent?

Question

以下代码片段禁止在特定条件下删除节点。禁用节点被丢弃到它自己的父节点的条件是什么？ (即节点没有移动)。默认情况下，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>

Answer 1

如果您只需要防止将其拖到其自己的父级上，则可以实现条件为:

// 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>