KendoUI - Treeview: как предотвратить перетаскивание элемента n с одного узла на другой?

Я работаю над перетаскиванием элемента узла с тем же узлом. Это работает, как ожидалось. Но это позволяет перетаскивать дочерний элемент из одного узла в другой. Это должно быть предотвращено.

Пример додзё

Скриншот

На прикрепленном скриншоте. Последний шаг не должен произойти. т.е. перемещение подэлемента на уровень элемента.

Благодарим вас за поддержку, чтобы решить проблему.

Заранее спасибо!

Источник

2 ответа

Вы можете предотвратить это с помощью некоторой пользовательской логики в drop событие.

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

Вам просто нужно заранее проверить, можно ли здесь сбросить элемент, а если нет, вызвать setValid метод.

Дополнительную информацию можно найти в документах KendoUI.

Источник

Пожалуйста, попробуйте с приведенным ниже фрагментом кода.

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

Дайте мне знать, если что-то беспокоит.

Источник
Другие вопросы по тегам