- 更新 -

Question

我在让简单的演示工作found here.

时遇到了问题

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

这是我的index.html文件：

bar = [[None, None], [None, None]]

这是我的js档案：

<!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>

这是我的css档案：

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

});

这段代码只是简单地从简单的演示中复制和粘贴，只是略微修改以显示列表A和B.有没有人知道什么是错的？

Answer 1

您忘记 依赖注入 只需替换

1 | Test1   | RIM   |   1.0         | 2016-01-20 |  1       | 
1 | 1       | MSFT  |   Microsoft   | 100        |  Buy     | Test
2 | 2       | IBM   |   IBM         | 200        |  Sell    | Test
2 | Test2   | iOS   |   1.0         | 2016-01-20 |  1       | 
3 | 3       | Yahoo |   Yahoo Inc   | 50         |  Sell    | Test
4 | 4       | Goog  |   Google Inc  | 500        |  Buy     | Test

与

angular.module("demo", [])

它应该有用..

plunk

- 更新 -

我发现您的标记存在问题，同时您在angular.module("demo", ['dndLists'])中引用了list这不会像您一样工作引用<ul dnd-list="list>"变量时，您应该引用您在可拖动中使用的列表。例如，您可以更改第一个列表。

undefined

到

<ul dnd-list="list">

现在应该可以正常工作..

P.S我已更新plunk

Answer 2

你需要下一个:(即依赖注入）

app.requires.push('dndLists');

你缺少角度中的ng-repeat，它应该如下所示：（ng-repeat =＆＃34;（listName，list）在models.lists＆＃34;）

  <div ng-repeat="(listName, list) in models.lists" class="col-md-6 ng-scope">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title ng-binding">List A</h3>
            </div>
            <div class="panel-body ng-scope">
                <ul dnd-list="list" class="ng-scope">

                    <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}"
                        dnd-disable-if="list.length < 2"
                        class="ng-binding ng-scope"
                        draggable="true">
                        {{item.label}}
                    </li>
                </ul>
            </div>
        </div>
    </div>

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

2 个答案:

- 更新 -