Question

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

在附带的截图中。最后一步不应该发生。即将 SubItem 移动到项目级别。

感谢您对修复此问题的支持。

提前致谢！

Answer 1

您可以使用drop事件中的某些自定义逻辑来阻止这种情况。

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

您只需要事先验证该元素是否可以在此处进行droppen，如果没有调用setValid方法。

可以在KendoUI docs上找到更多信息。

Answer 2

请尝试使用以下代码段。

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

如果有任何疑虑，请告诉我。

KendoUI - Treeview：如何防止项目从一个节点拖放到另一个节点？

2 个答案: