我想在我的项目中实现拖放功能。为此，我使用了角度拖放列表，下面是该功能的演示。我在html页面上什么都没得到。我试着在没有相关CSS的情况下打开这个列表，它运行得很好(评论了那段代码(。
有人能为这个问题提供解决方案吗？为什么我在控制台上没有任何错误的情况下没有在html上得到任何东西。
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="./script.js"></script>
<script src="./angular-drag-and-drop-lists.js"></script>
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body ng-app="demo">
<div ng-controller="SimpleDemoController" class="simpleDemo">
<ul dnd-list="list">
<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}">
{{item.label}}
</li>
</ul>
<!-- <ul ng-repeat="item in models.lists.A">
<li>{{item.label}}</li>
</ul> -->
</div>
</body>
</html>
Javascript
var demo = angular.module('demo', []);
var SimpleDemoController = function($scope) {
$scope.models = {
selected: null,
lists: {"A": [], "B": []}
};
console.log($scope.models.lists.A, $scope.models.lists.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);
};
demo.controller('SimpleDemoController', SimpleDemoController);
css
.simpleDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
.simpleDemo ul[dnd-list] .dndDraggingSource {
display: none;
}
.simpleDemo ul[dnd-list] .dndPlaceholder {
background-color: #ddd;
display: block;
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;
}
您需要在演示变量(角度模块(中添加"dndLists">
var demo = angular.module('demo', ["dndLists"]);