AngularJS - Ничего не получается на странице html при использовании angularjs библиотеки списка перетаскивания - PullRequest
Новая
       16

AngularJS - Ничего не получается на странице html при использовании angularjs библиотеки списка перетаскивания

2 голосов
/ 26 февраля 2020

Я хочу реализовать функцию перетаскивания в моем проекте. Для этого я использую angular -drag-and-drop-lists , а вот demo этой функции. Я ничего не получаю на странице html. Я пытался получить список без соответствующего CSS, и он работал нормально (прокомментировал этот кусок кода).

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

HTML: 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

        <script src="./script.js"></script>
        <script src="./angular-drag-and-drop-lists.js"></script>
        <title>Document</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body ng-app="demo">
        <div ng-controller="SimpleDemoController" class="simpleDemo">
            <ul dnd-list="list">
                <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>
            <!-- <ul ng-repeat="item in models.lists.A">
                <li>{{item.label}}</li>
            </ul> -->


        </div>
    </body>
</html>

Javascript

var demo = angular.module('demo', []);

var SimpleDemoController = function($scope) {

    $scope.models = {
        selected: null,
        lists: {"A": [], "B": []}
    };
    console.log($scope.models.lists.A, $scope.models.lists.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);

};

demo.controller('SimpleDemoController', SimpleDemoController);

css

.simpleDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}
.simpleDemo ul[dnd-list] .dndDraggingSource {
    display: none;
}
.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;
}
.simpleDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

1 Ответ

0 голосов
/ 02 марта 2020

Вам необходимо добавить «dndLists» в демо-переменную (angular модуль) 

var demo = angular.module('demo', ["dndLists"]);
...