angular-drag-and-drop-lists简单演示不起作用

Question

angular-drag-and-drop-lists简单演示不起作用

我在这里找到简单的演示工作时遇到了问题.

我正在显示两个列表,但是我无法拖放项目.演示非常简单,只是一个html文件,javascript文件和css文件.

这是我的index.html文件:

<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
    <meta charset="utf-8">
    <title>Drag & Drop Demo</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.min.js"></script>
    <script src="Scripts/my-app.js"></script>
    <link href="Content/my-styling.css" rel="stylesheet" />
</head>
<body class="simpleDemo" ng-controller="SimpleDemoController">
    <ul dnd-list="list">
        <li ng-repeat="item in models.lists.A"
            dnd-draggable="item"
            dnd-moved="models.lists.A.splice($index, 1)"
            dnd-effect-allowed="move"
            dnd-selected="models.selected = item"
            ng-class="{'selected': models.selected === item}">
            {{item.label}}
        </li>
    </ul>

    <ul dnd-list="list">
        <li ng-repeat="item in models.lists.B"
            dnd-draggable="item"
            dnd-moved="models.lists.B.splice($index, 1)"
            dnd-effect-allowed="move"
            dnd-selected="models.selected = item"
            ng-class="{'selected': models.selected === item}">
            {{item.label}}
        </li>
    </ul>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是我的js文件:

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);

});

Run Code Online (Sandbox Code Playgroud)

这是我的css文件:

.simpleDemo ul[dnd-list],
.simpleDemo ul[dnd-list] > li {
    position: relative;
}

.simpleDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

.simpleDemo ul[dnd-list] .dndDraggingSource {
    display: none;
}

.simpleDemo ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    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;
}

Run Code Online (Sandbox Code Playgroud)

这个代码只是简单的复制和粘贴从简单的演示,只是略微修改,以显示列表A和B.有谁知道什么是错的？