【问题标题】：angular-drag-and-drop-lists simple demo doesn't work角度拖放列表简单演示不起作用
【发布时间】：2016-05-17 17:44:35
【问题描述】：

我在让简单的演示工作时遇到问题found here.

我正在显示两个列表，但是我无法拖放项目。演示很简单，就是一个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>

这是我的 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);

});

这是我的 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;
}

此代码是从简单演示中简单复制和粘贴的，只是稍作修改以显示列表 A 和 B。有谁知道出了什么问题？

【问题讨论】：

标签： angularjs drag-and-drop

【解决方案1】：

你忘记了依赖注入只是替换

angular.module("demo", [])

与

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

它应该可以工作..

plunk

--更新--

我发现您的标记存在一些问题，而且您在 <ul dnd-list="list>" 中引用了 list，这将不起作用，因为您引用的是 undefined 变量，您应该在可拖动中引用您正在使用的列表。例如您可以更改的第一个列表。

<ul dnd-list="list">

到

<ul dnd-list="models.lists.A">

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

P.S 我已经更新了plunk

【讨论】：

非常感谢，解决了。对于第二个无序列表，我还必须将其更改为 models.lists.B。
@GabeMeister 我故意留下那部分是为了让您了解我们的......欢迎您......很高兴我能提供帮助:)
@Minato - plunkr 已停止工作。任何想法为什么？我在 angular.js 第 9037 行中收到“TypeError: Cannot read property 'splice' of undefined”。使用最新版本的 Angular 1.x 运行时出现同样的错误。
@Minato - 忽略我最后的评论。问题是您的 PS 中链接的 plunkr 实际上并没有
非常感谢，这个 plunkr 应该在他们的网站上引用，或者类似的东西。他们在屏幕上的示例并不清楚所有内容

【解决方案2】：

你需要下一个：（也就是依赖注入）

app.requires.push('dndLists');

您的角度中缺少 ng-repeat，它应该如下所示：(ng-repeat="(listName, list) in models.lists")

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

【讨论】：