Currently trying to add a drag and drop feature to my project. Utilizing the angular-drag-and-drop-lists library, with a working demo available for reference. Despite no errors in the console, nothing is displaying on the HTML page. I did manage to render the list without the associated CSS by commenting out that code.
In need of assistance to resolve this issue and understand why the content isn't appearing on the HTML page.
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;
}