angular-ui-tree/examples/views/nodrop.html

An AngularJS UI component that can sort nested lists, provides drag & drop support and doesn't depend on jQuery

<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer.html">
  <div ui-tree-handle class="tree-node tree-node-content">
    <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" 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>
  <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_renderer.html'">
    </li>
  </ol>
</script>

<!-- Nodrop Nested node template -->
<script type="text/ng-template" id="nodrop_nodes_renderer.html">
  <div ui-tree-handle class="tree-node tree-node-content" ng-class="{nodrop: node.nodrop}">
    {{node.title}} <span ng-if="node.nodrop">No drop</span>
    <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span
        class="glyphicon glyphicon-remove"></span></a>
  </div>
  <ol ng-if="node.nodrop" ui-tree-nodes="" data-nodrop-enabled="true" ng-model="node.nodes" ng-class="{hidden: collapsed}">
    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodrop_nodes_renderer.html'">
    </li>
  </ol>
  <ol ng-if="!node.nodrop"ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodrop_nodes_renderer.html'">
    </li>
  </ol>
</script>


<div class="row">
  <div class="col-sm-12">
    <h3>Prevent drop</h3>
    <p>Add the attribute <code>data-nodrop-enabled</code> to either the <code>ui-tree</code> element or a <code>ui-tree-nodes</code> element to prevent the element from receiving nodes.</p>
  </div>
</div>

<h4>Prevent drop on the entire tree</h4>
<div class="row">
  <div class="col-sm-6">
    <div ui-tree id="tree-root" data-nodrop-enabled="true">
      <ol ui-tree-nodes ng-model="data">
        <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
      </ol>
    </div>
  </div>

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

<h4>Prevent drop on a single node (but not its children)</h4>
<div class="row">
  <div class="col-sm-6">
    <div ui-tree id="tree-root">
      <ol ui-tree-nodes ng-model="data">
        <li ng-repeat="node in data" ui-tree-node ng-include="'nodrop_nodes_renderer.html'"></li>
      </ol>
    </div>
  </div>

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