角度拖放列表简单演示不起作用
Posted
技术标签:
【中文标题】角度拖放列表简单演示不起作用【英文标题】：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。有谁知道出了什么问题？
【问题讨论】：
【参考方案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>
【讨论】：
以上是关于角度拖放列表简单演示不起作用的主要内容，如果未能解决你的问题，请参考以下文章