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> 

，當我在標題點擊滾動手風琴引導的內容，我得到的是拖放事件的處理

怎麼可能我：

添加到手風琴標題一些圖標，藉助它我可以拖放所有我的節點，當我點擊標題我的數據滾動作爲bootstrap嗎？它是否真的讓事情變得糟糕？如何？

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();"，一切正常，只需拖放必須在整個元素上（遊標是整個元素ent，但拖放僅適用於元素文本）

如何使用範圍也許？

Answer 1

裹<accordion-heading>內容

 <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（）。在我來說，我UI添加的樹，只處理上的圖標這樣

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

的唯一的事情是，我我以前不使用手風琴。我實現了摺疊指令。

希望這可以幫助！

好運氣在一個<div>

HTML代碼手風琴