Кликабельная ссылка в перетаскиваемом узле в angular-ui-tree

Question

В angular-ui-tree я ищу способ иметь ссылки внутри перетаскиваемого узла.

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

Я видел этот ответ Angular JS (angular-ui-tree) конфликт ng-click против события начала перетаскивания, однако он не похож на то, что я хочу сделать. В этом ответе ng-click привязан к узлу, где в моем случае у меня есть несколько ссылок внутри узла.

Ниже мой 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>

Есть ли способ иметь несколько ссылок внутри перетаскиваемого узла?

заранее спасибо

Answer 1

Добавьте атрибут no-drag к ссылкам следующим образом:

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

Answer 2

Я была такая же проблема. Вот как я это исправил:

Добавить a элемент в строке 602 angular-ui-tree.js

eventElmTagName = eventElm.prop('tagName').toLowerCase();
if (eventElmTagName == 'input' ||
eventElmTagName == 'textarea' ||
eventElmTagName == 'button' ||
eventElmTagName == 'i' ||
eventElmTagName == 'a' ||  //this would ignore 'a' elements while dragging
eventElmTagName == 'select') { 
return;
}

Просто к вашему сведению - вы используете глифы в span элемент. Таким образом, вы можете столкнуться с той же проблемой, если вы нажмете на глификон. добавлять span элемент в приведенном выше заявлении, чтобы исправить это, а также.