Kendo UI - Treeview：如何防止项目从一个节点拖放到另一个节点？答案

【问题标题】：KendoUI - Treeview: How to prevent the item drag n drop from one node to another?Kendo UI - Treeview：如何防止项目从一个节点拖放到另一个节点？
【发布时间】：2016-07-18 09:29:19
【问题描述】：

我正在将节点项拖放到同一节点中。它按预期工作。但它允许将子项从一个节点拖放到另一个节点。它应该被阻止。

Dojo example

Screenshot

在随附的屏幕截图中。最后一步不应该发生。即将 SubItem 移动到 Item 级别。

感谢您对解决问题的支持。

提前致谢！

【问题讨论】：

标签： javascript kendo-ui dojo treeview kendo-treeview

【解决方案1】：

您可以通过 drop 事件中的一些自定义逻辑来防止这种情况发生。

drop: function(e) {
    // Apply your own logic here
    e.setValid(false);
}

你只需要预先验证该元素是否可以在这里droppen，如果不可以调用setValid方法。

更多信息请访问KendoUI docs。

【讨论】：

感谢 Philipp 的回复。有什么方法可以获取选定的项目节点吗？所以我可以验证其他节点。
是的，drop-event 确实暴露了 sourceNode，如果我没记错的话，甚至还有 destinationNode 属性。

【解决方案2】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treeview/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
        <div class="box-col">
            <h4>TreeView</h4>
            <div kendo-tree-view="tree"
             k-data-source="treeData"
             drag-and-drop="true"
             k-drag="onDrag"
             k-on-change="selectedItem = dataItem"
                 k-on-drop="onDrop(kendoEvent)">
                <span k-template>
                     {{dataItem.text}} <button class='k-button' ng-click='click(dataItem)'>Select</button>
                 </span>
             </div>
        </div>
        <div class="box-col" ng-show="selectedItem">
          <h4>Selected: {{selectedItem.text}}</h4>
          <button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
          <button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
          <button class="k-button" ng-click="remove(selectedItem)">Delete</button>
        </div>
    </div>
    <style>
        .k-treeview .k-in {
            padding: 5px;
        }
    </style>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
            { id:1, text: "Item 1" },
            { id:2, text: "Item 2", items: [
              { id:1, text: "SubItem 2.1" },
              { id:2, text: "SubItem 2.2" }
            ] },
            { id:3, text: "Item 3" }
          ]});

          $scope.click = function(dataItem) {

            alert(dataItem.text);
          };

          function makeItem() {
            var txt = kendo.toString(new Date(), "HH:mm:ss");
            return { text: txt };
          };

          $scope.addAfter = function(item) {
            var array = item.parent();
            var index = array.indexOf(item);
            var newItem = makeItem();
            array.splice(index + 1, 0, newItem);
          };

          $scope.addBelow = function() {
            // can't get this to work by just modifying the data source
            // therefore we're using tree.append instead.
            var newItem = makeItem();
            $scope.tree.append(newItem, $scope.tree.select());
          };

          $scope.remove = function(item) {
            var array = item.parent();
            var index = array.indexOf(item);
            array.splice(index, 1);

            $scope.selectedItem = undefined;
          };

                $scope.onDrag = function(e) {
            console.log("e.statusClass : " + e.statusClass);

             if (e.statusClass.indexOf("add") >= 0) {
                // deny the operation
                e.setStatusClass("k-denied");
             }
          }
          $scope.onDrop = function(e) {
             if($scope.tree.parent(e.sourceNode).data('uid') != $scope.tree.parent(e.destinationNode).data('uid'))
             {
              e.preventDefault();
             }
          }
    })
</script>


</body>
</html>

如果有任何问题，请告诉我。

【讨论】：

在 onDrop 上运行良好。无法在onDrag 函数中获取e.destinatonNode。 Bze，该图标具有误导性。它说，它会允许下降，但事实并非如此。检查screenshot。有什么办法可以解决这个问题。
我会尽力让你知道的。