具有拖放重新排列节点/插入节点的 Angular JavaScript 树视图答案

【问题标题】：Angular JavaScript Tree View with drag-and-drop rearrangement of nodes / insertion of nodes具有拖放重新排列节点/插入节点的 Angular JavaScript 树视图
【发布时间】：2018-10-07 16:03:00
【问题描述】：

我是 JavaScript 树视图和 Angular 的新手。我在网上搜索了这个主题，但无法轻松找到我的问题的答案。
我需要一个与 Angular 配合得很好的树视图，并且可以处理更大的数据集（数万个节点），它允许我使用拖放操作在树中移动节点以及插入和删除节点。

【问题讨论】：

标签： javascript angular treeview

【解决方案1】：

我在谷歌上搜索了一下，发现这个尝试一下，但在实现之前先了解一下 js 和 angular

Simple List Demo

Nested List demo

HTML

    <!-- The dnd-list directive allows to drop elements into it.
     The dropped data will be added to the referenced list -->
<ul dnd-list="list">
    <!-- The dnd-draggable directive makes an element draggable and will
         transfer the object that was assigned to it. If an element was
         dragged away, you have to remove it from the original list
         yourself using the dnd-moved attribute -->
    <li ng-repeat="item in list"
        dnd-draggable="item"
        dnd-moved="list.splice($index, 1)"
        dnd-effect-allowed="move"
        dnd-selected="models.selected = item"
        ng-class="{'selected': models.selected === item}"
        >
        {{item.label}}
    </li>
</ul>

CSS

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.simpleDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
.simpleDemo ul[dnd-list] .dndDraggingSource {
    display: none;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.simpleDemo ul[dnd-list] .dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}

.simpleDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
}

/**
 * Show selected elements in green
 */
.simpleDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

角度

angular.module("demo").controller("SimpleDemoController", function($scope) {

    $scope.models = {
        selected: null,
        lists: {"A": [], "B": []}
    };

    // Generate initial model
    for (var i = 1; i <= 3; ++i) {
        $scope.models.lists.A.push({label: "Item A" + i});
        $scope.models.lists.B.push({label: "Item B" + i});
    }

    // Model to JSON for demo purpose
    $scope.$watch('models', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true);

});

【讨论】：