Sincere Sincere - 6 months ago 185
AngularJS Question

Clickable link in draggable node in angular-ui-tree

In angular-ui-tree I'm looking for a way to have links inside a draggable node.

What's happening now is that when I click on the link inside the node it starts "holding" the whole node to drag it.

I saw this answer Angular JS (angular-ui-tree) ng-click conflict vs drag start event, however it is not similar to what I want to do. In this answer

ng-click
is bound to the node, where in my case I have multiple links inside the node.

Below is my html:

<div ui-tree="treeOptions" drag-delay="1000" id="tree-root">
<ol ui-tree-nodes ng-model="filteredModules" data-nodrop>
<li ng-repeat="module in filteredModules" ui-tree-node>
<div ui-tree-handle ng-click="toggle(this)">
<a class="btn btn-xs"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{module.name}}
</div>
<ol ui-tree-nodes ng-model="module.stages" data-nodrop ng-class="{hidden: collapsed}">
<li ng-repeat="stage in module.stages" ui-tree-node>
<div ui-tree-handle ng-click="toggle(this)">
<a class="btn btn-xs"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
{{stage.name}}
</div>
<div ui-tree-nodes ng-model="stage.cases" ng-class="{hidden: collapsed}">
<div ng-repeat="case in stage.cases" ui-tree-node>
<div ui-tree-handle>

<!-- HERE I HAVE TWO LINKS -->

<a href="/#/admin/cases/{{case._id}}">{{case.name}}</a>
<a href="/#/admin/cases/edit/{{case._id}}" class="pull-right btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span> Edit</a>
</div>
</div>
</div>
</li>
</ol>
</li>
</ol>
</div>


Is there a way to have multiple links inside a draggable node?

Thanks in advance

Answer

Add the no-drag attribute to the links like this:

<a data-nodrag href="/#/admin/cases/{{case._id}}">{{case.name}}</a>                       
<a data-nodrag href="/#/admin/cases/edit/{{case._id}}" class="pull-right btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span> Edit</a>
Comments