我在让简单的演示在这里找到时遇到了问题。

我

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

这是我的索引.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。有谁知道出了什么问题？

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

angular.module("demo", [])

跟

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

它应该工作..

扑通克

--更新--

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

<ul dnd-list="list">

自

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

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

附言我已经更新了扑通

你需要下一个：（即依赖注入）

app.requires.push('dndLists');

你在你的角度中缺少ng-repeat，它应该看起来像这样：（ng-repeat="（listName，list）在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>

角度拖放列表简单演示不起作用

--更新--

相关内容

最新更新

热门标签：