AngularJS Angular-dragdrop 嵌套问题答案

【问题标题】：AngularJS Angular-dragdrop Nested issuesAngularJS Angular-dragdrop 嵌套问题
【发布时间】：2014-01-29 01:12:02
【问题描述】：

使用 angular-dragdrop 指令的嵌套树结构存在问题：https://github.com/codef0rmer/angular-dragdrop。想知道是否有人使用过这个指令并让它与嵌套结构一起使用。

这是我所拥有的： HTML：

<span ng-if="rootFolder.expanded" class="glyphicon glyphicon-folder-open hoverable" ng-click="rootFolder.expanded = false"></span>
<span ng-if="!rootFolder.expanded" class="glyphicon glyphicon-folder-close hoverable" ng-click="myShoebox.expanded = true"></span>
<a class="hoverable" ng-click="openEntity(rootFolder)">{{rootFolder.title}}</a>
<ul class="file-system-list file-system-list-first" ng-show="rootFolder.expanded" ng-model='myShoebox.folders' jqyoui-droppable="{multiple:true, onDrop: 'moveFolder(rootFolder)',index: {{$index}}}" data-drop="true">
    <li ng-repeat="folder in rootFolder.folders"data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="rootFolder.folders" jqyoui-draggable="{animate:true, onStart:'dragFolder(folder)'}" ng-include="'file_system_renderer.html'"></li>
</ul>
<script type="text/ng-template" id="file_system_renderer.html">
    <span ng-if="folder.expanded" class="glyphicon glyphicon-folder-open hoverable" ng-click="folder.expanded = false"></span>
    <span ng-if="!folder.expanded" class="glyphicon glyphicon-folder-close hoverable" ng-click="getChildren(folder)"></span>
    <a class="hoverable" ng-click="openEntity(folder)">{{folder.title}}</a>
    <ul class="file-system-list" ng-show="folder.expanded" data-drop="true" ng-model='folder.folders' jqyoui-droppable="{multiple:true, onDrop: 'moveFolder(folder)',index: {{$index}}}">
        <li ng-repeat="folder in folder.folders" ng-show="folder.title" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="folder.folders" jqyoui-draggable="{animate:true, onStart:'dragFolder(folder)'}" ng-include="'file_system_renderer.html'"></li>
    </ul>
</script>

JavaScript：

$scope.rootFolder = {"folders":[{"title":"fake`enter code here`","folders":[]},{"title":"fake 2","folders":[]}]}

rootFolder 对象具有无限嵌套的能力。我似乎根本无法将文件夹拖放到其他文件夹中。有什么想法吗？

【问题讨论】：

标签： javascript angularjs drag-and-drop

【解决方案1】：

遇到类似问题，发现angular-ui-tree。虽然我最终还是自己写了，因为我想使用 HTML5 拖放 API：angular-drag-and-drop-lists

【讨论】：