我想在我的元素中实现拖放功能。为此，我使用 angular-drag-and-drop-lists这是demo该功能的。我没有得到任何 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;
}
最佳答案
您需要在演示变量(angular 模块)中添加“dndLists”
var demo = angular.module('demo', ["dndLists"]);
关于javascript - AngularJS - 使用 angularjs 拖放列表库时没有在 html 页面中获取任何内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60413359/