Вопрос: Ddrag и drop и bootstrap UI Accordion


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

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

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

как я мог:

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

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();" и все в порядке, просто перетаскивание должно быть на весь элемент (курсор предназначен для всего элемента, но drag-and-drop - только для текста элемента)

как быть с областями, может быть?


4


источник


Ответы:


Заворачивать <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>

Надеюсь, что это поможет вам.


1



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

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

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

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

Удачи


1