连接树在ui-tree拖拽预防

Question

我正在使用我正在使用： http://angular-ui-tree.github.io/angular-ui-tree/#/connected-trees 我希望能够在父级别上拖动，但不能在树中的子级别上拖动。

我该怎么做呢？我现在正在使用他们的代码，我可以把它放在这里

HTML

<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer1.html">
  <div ui-tree-handle class="tree-node tree-node-content">
    <div class="tree-node-content">
      <a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
      {{node.title}}
      <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
      <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
    </div>
  </div>
  <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer1.html'">
    </li>
  </ol>
</script>
<script type="text/ng-template" id="nodes_renderer2.html">
  <div class="tree-node">
    <div class="pull-left tree-handle" >
      <span class="glyphicon glyphicon-list"></span>
    </div>
    <div class="tree-node-content">
      <a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)">
        <span class="glyphicon" ng-class="{
          'glyphicon-chevron-right': collapsed,
          'glyphicon-chevron-down': !collapsed
          }">
        </span>
      </a>

      {{node.title}}

      <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
      <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
    </div>
  </div>
  <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer2.html'">
    </li>
  </ol>
</script>

<div class="row">
  <div class="col-sm-12">
    <h3>Connected Trees</h3>
  </div>
</div>

<div class="row">
  <div class="col-sm-6">
    <h3>Tree 1</h3>
    <div ui-tree id="tree1-root">
      <ol ui-tree-nodes="" ng-model="tree1">
        <li ng-repeat="node in tree1" ui-tree-node ng-include="'nodes_renderer1.html'"></li>
      </ol>
    </div>
  </div>

  <div class="col-sm-6">
    <h3>Tree 2</h3>
    <div ui-tree id="tree2-root">
      <ol ui-tree-nodes="" ng-model="tree2">
        <li ng-repeat="node in tree2" ui-tree-node ng-include="'nodes_renderer2.html'"></li>
      </ol>
    </div>
  </div>
</div>

<h3>Data binding</h3>
<div class="row">
  <div class="col-sm-6">
    <pre class="code">{{ tree1 | json }}</pre>
  </div>

  <div class="col-sm-6">
    <pre class="code">{{ tree2 | json }}</pre>
  </div>
</div>

，控制器是

(function () {
  'use strict';

  angular.module('demoApp')
    .controller('ConnectedTreesCtrl', ['$scope', function ($scope) {
      $scope.remove = function (scope) {
        scope.remove();
      };

      $scope.toggle = function (scope) {
        scope.toggle();
      };

      $scope.newSubItem = function (scope) {
        var nodeData = scope.$modelValue;
        nodeData.nodes.push({
          id: nodeData.id * 10 + nodeData.nodes.length,
          title: nodeData.title + '.' + (nodeData.nodes.length + 1),
          nodes: []
        });
      };

      $scope.tree1 = [{
        'id': 1,
        'title': 'tree1 - item1',
        'nodes': []
      }, {
        'id': 2,
        'title': 'tree1 - item2',
        'nodes': []
      }, {
        'id': 3,
        'title': 'tree1 - item3',
        'nodes': []
      }, {
        'id': 4,
        'title': 'tree1 - item4',
        'nodes': []
      }];
      $scope.tree2 = [{
        'id': 1,
        'title': 'tree2 - item1',
        'nodes': []
      }, {
        'id': 2,
        'title': 'tree2 - item2',
        'nodes': []
      }, {
        'id': 3,
        'title': 'tree2 - item3',
        'nodes': []
      }, {
        'id': 4,
        'title': 'tree2 - item4',
        'nodes': []
      }];
    }]);

}());

由于

**我试过了**

这就是我试过的

    $scope.tree2Options = {
        beforeDrop : function (e) {
            //console.log("sent from tree 2");
            var destValue = e.dest.nodesScope.node ? e.dest.nodesScope.node.value : "pata nehi";
            //console.log(destValue);
        },
        accept: function(sourceNodeScope, destNodesScope, destIndex) {

            //console.log("tree 2 before accepting ");
            console.log(destNodesScope.$element.attr('data-type'));
            return true
        }
    };

然后

 <div class="col-sm-6">
    <h3>Tree 2</h3>
    <div  data-ui-tree="tree2Options" id="tree2-root">
      <ol ui-tree-nodes="" ng-model="tree2" data-type="{{tree2.id}}">
        <li ng-repeat="node in tree2" ui-tree-node ng-include="'nodes_renderer2.html'"></li>
      </ol>
    </div>
  </div>

但是console.log没有给我任何ID或任何东西。我想添加一个属性，然后检查它

**一个hacky修复**

所以我做了这个有点修复它，但它非常hacky ...我仍然需要知道为什么我不能得到ID以及为什么这个工作...基本上如果我从节点[]下降节点所以它有id未定义，它给出了undefined，我检查了..它完成了工作，但我讨厌它如此hacky

    accept: function(sourceNodeScope, destNodesScope, destIndex) {

        //console.log("tree 2 before accepting ");
        console.log(destNodesScope.$element.attr('data-type'));
        if(destNodesScope.$element.attr('data-type') != 'undefined'){
            //return true
            console.log("true");
            return true;
        }else{
            console.log("flase");
            return false;
        }

    }

Answer 1

在某些试验和错误发现之后确定

这就是我所做的..我在html

中创建了如上所述的数据类型

 <div class="col-sm-6">
    <h3>Tree 2</h3>
    <div  data-ui-tree="tree2Options" id="tree2-root">
      <ol ui-tree-nodes="tree2Nodes" ng-model="tree2"  >
        <li ng-repeat="node in tree2" ui-tree-node ng-include="'nodes_renderer2.html'" data-type="{{node.allowed}}"></li>
      </ol>
    </div>
  </div>
</div>

然后我添加了以下内容

accept: function(sourceNodeScope, destNodesScope, destIndex) {

                var allowed = false;

                angular.forEach(destNodesScope.$element[0].children, function (item) {
                    var attr_allowed = item.attributes['data-type'] && item.attributes['data-type'].value ? item.attributes['data-type'].value : false;
                    if(attr_allowed && attr_allowed=="allowed" ){
                        allowed = true;
                    }
                });

                if(allowed){

                    return true;
                }else{
                    return false;
                }

            },

立即行动

感谢