角度可拖动和可排序的div没有ng-repeat

时间:2016-03-22 16:58:40

标签: javascript jquery html angularjs drag-and-drop

在我的页面上,我有4个不同的div。他们每个人都拥有自己的jstree和来自外部json文件的数据。

   <div  class="panel frame">
                        <div class="panel-heading" role="tab" id="headingCorporate">
                            <p class="panel-title" align="center">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseCorporate" aria-expanded="false" aria-controls="collapseCorporate">
                                    Corporate Frame   <span class="caret pull-right"></span>
                                </a>
                            </p>
                        </div>
                        <div id="collapseCorporate" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCorporate">
                            <div class="panel-body">
                                <js-tree tree-data="json" tree-src="data-tree/corporate.json"
                                         tree-plugins="contextmenu,dnd,types,wholerow,search,state"
                                         tree-events="changed:callback;"></js-tree>
                            </div>
                        </div>
                </div>
                <div  class="panel frame">
                    <div class="panel-heading" role="tab" id="headingClinical">
                        <p class="panel-title panel-primary" align="center">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseClinical" aria-expanded="false" aria-controls="collapseClinical">
                                Clinical Hierarchy Frame   <span class="caret pull-right"></span>
                            </a>
                        </p>
                    </div>
                    <div id="collapseClinical" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingClinical">
                        <div class="panel-body">
                            <js-tree tree-data="json" tree-src="data-tree/clinical.json"
                                     tree-plugins="contextmenu,dnd,types,wholerow,search,state"
                                     tree-events="changed:callback;"></js-tree>
                        </div>
                    </div>
                </div>
                <div  class="panel frame">
                    <div class="panel-heading" role="tab" id="headingStudy">
                        <p class="panel-title" align="center">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseStudy" aria-expanded="false" aria-controls="collapseStudy">
                                Study Frame   <span class="caret pull-right"></span>
                            </a>
                        </p>
                    </div>
                    <div id="collapseStudy" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingStudy">
                        <div class="panel-body">
                            <js-tree tree-data="json" tree-src="data-tree/study.json"
                                     tree-plugins="contextmenu,dnd,types,wholerow,search,state"
                                     tree-events="changed:callback;"></js-tree>
                        </div>
                    </div>
                </div>
                <div  class="panel frame">
                    <div class="panel-heading" role="tab" id="headingIndustry">
                        <p class="panel-title" align="center">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseIndustry" aria-expanded="false" aria-controls="collapseIndustry">
                                Industry Frame   <span class="caret pull-right"></span>
                            </a>
                        </p>
                    </div>
                    <div id="collapseIndustry" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingIndustry">
                        <div class="panel-body">
                            <js-tree tree-data="json" tree-src="data-tree/industry.json"
                                     tree-plugins="contextmenu,dnd,types,wholerow,search,state"
                                     tree-events="changed:callback;"></js-tree>
                        </div>
                    </div>
                </div>

我需要拖放这些div。 ng example的ngDraggable指令与我想做的非常接近,但它仍然需要ng-repeat。所以我的问题是有没有办法制作4个不同的div而没有ng-repeat的可拖动和可排序的列表?

0 个答案:

没有答案