Ddrag и падение и самонастройки UI аккордеон

Question

У меня есть такой код:

<div ui-tree> 
    <ol ui-tree-nodes="" ng-model="policies"> 
     <li ng-repeat="item in policies" ui-tree-node> 
     <div ui-tree-handle> 
      <accordion> 
      <accordion-group> 
       <accordion-heading> 
       {{item.Title}} 
       <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></accordion-heading> 
       {{item.Content}}      
      <ol ui-tree-nodes="" ng-model="item.Options" data-nodrop> 
       <li ng-repeat="subItem in item.Options" ui-tree-node> 
       <div ui-tree-handle> 
        <accordion-group> 
         <accordion-heading>{{subItem.Title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i></accordion-heading> 
         {{subItem.Content}} 
        </accordion-group> 
       </div> 
       </li> 
      </ol> 
      </accordion-group> 
      </accordion> 
     </div> 
     </li> 
    </ol> 
    </div> 

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

как мог i:

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

https://github.com/JimLiu/angular-ui-tree

http://angular-ui.github.io/bootstrap/

UPD:

<script id="template/accordion/accordion-group.html" type="text/ng-template"> 
    <div class="panel panel-default">    
    <div class="panel-heading"> 
     <h4 href class="btn btn-success btn-xs accordion-toggle pull-left" data-nodrag ng-click="toggleOpen();"><i class="glyphicon" ng-class="{'glyphicon-chevron-right': isOpen, 'glyphicon-chevron-down': !isOpen}"></i></h4> 
     <h4 class="panel-title"> 
     <a href accordion-transclude="heading"><span>{{heading}}</span></a> 
     </h4> 
    </div> 
    <div class="panel-collapse" collapse="!isOpen"> 
     <div class="panel-body" ng-transclude></div> 
    </div> 
    </div> 
</script> 
    <div ui-tree="options" data-drag-delay="20"> 
    <ol ui-tree-nodes="" ng-model="articles"> 
     <li ng-repeat="item in articles" ui-tree-node> 
     <div ui-tree-handle> 
      <accordion close-others="false"> 
      <accordion-group> 
       <accordion-heading> 
       {{item.Title}} 
       </accordion-heading>      
       <div ng-bind-html="item.Content"></div>      
      <ol ui-tree-nodes="" ng-model="item.Options"> 
       <li ng-repeat="subItem in item.Options " ui-tree-node> 
       <div ui-tree-handle> 
        <accordion close-others="false"> 
        <accordion-group> 
         <accordion-heading>{{subItem.Title}} 
         </accordion-heading> 
         <div ng-bind-html="subItem.Content"></div> 
        </accordion-group> 
        </accordion> 
       </div> 
       </li> 
      </ol> 
      </accordion-group>     
      </accordion> 
     </div> 
     </li> 
    </ol> 
    </div> 

перетащить работу только тогда, когда я нажимаю на текст заголовка, или текст (когда на панели титула ничего уволен) открытие находится на ng-click="toggleOpen();", и все в порядке, просто перетаскивание должно быть на весь элемент (курсор для целых эль но перетаскивание только для текста элемента)

Как быть с областями, возможно?

Answer 1

Wrap <accordion-heading> содержания в <div>

коде аккордеона HTML

 <accordion close-others="false"> 
     <accordion-group is-open="isopen"> 
      <accordion-heading ng-click="isopen=!isopen"> 
      <div>{{item.Title}}</div> 
      </accordion-heading>      
      <div ng-bind-html="item.Content"></div>      
     <ol ui-tree-nodes="" ng-model="item.Options"> 
      <li ng-repeat="subItem in item.Options " ui-tree-node> 
      <div ui-tree-handle> 
       <accordion close-others="false"> 
       <accordion-group> 
        <accordion-heading>{{subItem.Title}} 
        </accordion-heading> 
        <div ng-bind-html="subItem.Content"></div> 
       </accordion-group> 
       </accordion> 
      </div> 
      </li> 
     </ol> 
     </accordion-group>     
     </accordion> 

Надеется, что это поможет.

Answer 2

Попробуйте использовать $ event.stopPropagation() для переключения аккордеона. В моем случае я добавил щ-дерево-ручка только на иконку, как этот

<div class="panel-controls left" ng-hide="isEditable" ui-tree-handle> 
         <span class="controls-item no-border"> 
          <i class="glyphicon glyphicon-th-list text-sm text-gray"></i> 
         </span> 
        </div> 

Полный код

 <div ui-tree="options" data-max-depth="3"> 
     <!-- Ranks list START --> 
     <div ui-tree-nodes data-type="rank" ng-model="taskbook.ranks"> 
      <div ng-repeat="rank in taskbook.ranks" 
       class="panel panel-clean panel-solid panel-sortable" 
       ui-tree-node 
       ng-controller="RankListCtrl" 
       data-type="rank"> 
       <!-- Rank Edit START --> 
       <div class="panel-heading clearfix" 
        ng-class="{'': isCollapsed, 'collapsed': !isCollapsed}"> 

        <div class="panel-controls left" ng-hide="isEditable" ui-tree-handle> 
         <span class="controls-item no-border"> 
          <i class="glyphicon glyphicon-th-list text-sm text-gray"></i> 
         </span> 
        </div> 

        <h2 class="panel-title pull-left" ng-hide="isEditable"> 
         <span ng-bind="rank.name | truncate:false:15"></span> 
        </h2> 

        <div class="inline-edit" data-nodrag ng-show="isEditable"> 
         <form class="form-inline" role="form"> 
          <div class="form-group"> 
           <input type="text" 
             class="form-control" 
             placeholder="Rank name" 
             ng-model="rank.name" 
             focus-me="isEditable"> 
          </div> 
         </form> 
        </div> 

        <div class="panel-controls right"> 

         <button type="button" 
           class="controls-item btn btn-sm btn-danger btn-flat text-sm" 
           ng-hide="!isEditable" 
           ng-click="cancelEditable()"> 

          <i class="glyphicon glyphicon-remove"></i> 
         </button> 
         <button type="button" 
           class="controls-item btn btn-sm btn-success btn-flat text-sm" 
           ng-hide="!isEditable" 
           ng-disabled="rank.name === ''|| isSaving" 
           ng-click="hideEditable()"> 

          <i class="glyphicon glyphicon-ok"></i> 
         </button> 
        </div> 
       </div></div></div> 

Единственное, что я did't использовать аккордеон. Я реализовал свернутую директиву.

Надеюсь, это поможет!

Успехов