0
テーブルにツリーがあります。私は、anglejを使って下のツリーにドラッグ＆ドロップ機能を追加する方法を知りたいと思います。どんな助けでも大歓迎です。 Plunkrはclick hereを追加しました。anglejsを使用するテーブル内のツリーのドラッグアンドドロップ機能
// htmlファイル
<html>
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>
<h1>
Tree Table and Checkbox with AngularJS
</h1>
<hr>
<div class="wrapper" data-ng-app="testApp" data-ng-controller="treeTable">
<table class="table-nested">
<thead>
<tr>
<!-- <th >
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
</th> -->
<th>
<input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
</th>
<th class="cell-members">
Version
</th>
<th>
Size
</th>
</tr>
</thead>
<tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="'table_tree.html'" data-ng-repeat="item in list"></tbody>
</table>
<script id="table_tree.html" type="text/ng-template">
<tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
<td class="cell-name" ng-if="level && level > 1">
<span style="padding-left: 30px" > <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}} </span>
</td>
<td class="cell-name top-border" ng-if=" (!level && level <= 1 ) || (level && level <= 1)">
<span style="padding-left:11px" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-name top-border" ng-if="!level">
<span class="indent" ng-click="item.opened = !item.opened"></span> <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
{{item.name}}
</td>
<td class="cell-members top-border">
{{item.Version}}
</td>
<td>
{{item.Size}}
</td>
</tr>
<tr class="children" ng-if="item.children && item.children.length > 0">
<td colspan="3">
<table>
<tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="'table_tree.html'" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
</table>
</td>
</tr>
</script>
</div>
</body>
</html>