我正在与angular-drag-and-drop-lists合作。我想在本地复制this。
我从本地WAMP服务器运行代码。当我点击任何＆＃39;项目＆＃39;或者＆＃39;容器＆＃39;它没有被选中＆＃39;分配的班级。事实上，单击事件并不是由angular-drag-and-drop-lists库捕获的。 因此没有任何拖放功能正常工作。
我错过了什么吗？
以下是HTML标记：
<head>
<script type="text/ng-template" id="list.html">
<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}"
ng-include="item.type + '.html'" >
{{item.label}}
</li>
</ul>
</script>
<script type="text/ng-template" id="container.html">
<div class="container-element box box-blue">
<h3>Container {{item.id}}</h3>
<div class="column" ng-repeat="list in item.columns" ng-include="'list.html'"></div>
<div class="clearfix"></div>
</div>
</script>
<script type="text/ng-template" id="item.html">
<div class="item">Item {{item.id}}</div>
</script>
</head>
<body ng-app="demo" ng-controller="NestedListsDemoController as demoController">
<div class="col-md-10 ng-scope">
<div class="row">
<div ng-repeat="(zone, list) in models.dropzones" class="col-md-6">
<div class="dropzone box box-yellow">
<!-- The dropzone also uses the list template -->
<h3 class="ng-binding">Dropzone {{zone}}</h3>
<div ng-include="'list.html'" class="ng-scope"></div>
</div>
</div>
</div>
<div view-source="nested"></div>
<h2>Generated Model</h2>
<pre>{{modelAsJson}}</pre>
</div>
</body>
这是JS：
angular.module("demo", ['dndLists']).controller("NestedListsDemoController",
function($scope) {
$scope.models = {
selected: null,
templates: [
{type: "item", id: 2},
{type: "container", id: 1, columns: [[], []]}
],
dropzones: {
"A":[
{
"type": "container",
"id": 1,
"columns": [
[
{
"type": "item",
"id": "1"
},
{
"type": "item",
"id": "2"
}
],
[
{
"type": "item",
"id": "3"
}
]
]
},
{
"type": "item",
"id": "4"
},
{
"type": "item",
"id": "5"
},
{
"type": "item",
"id": "6"
}
],
"B":[
{
"type": "item",
"id": 7
},
{
"type": "item",
"id": "8"
},
{
"type": "container",
"id": "2",
"columns": [
[
{
"type": "item",
"id": "9"
},
{
"type": "item",
"id": "10"
},
{
"type": "item",
"id": "11"
}
],
[
{
"type": "item",
"id": "12"
},
{
"type": "container",
"id": "3",
"columns": [
[
{
"type": "item",
"id": "13"
}
],
[
{
"type": "item",
"id": "14"
}
]
]
},
{
"type": "item",
"id": "15"
},
{
"type": "item",
"id": "16"
}
]
]
},
{
"type": "item",
"id": 16
}
]
}
};
$scope.$watch('models.dropzones', function(model) {
//console.log ("Model: " + modelAsJson);
$scope.modelAsJson = angular.toJson(model, true);
}, true);
});
这是css：
.dropzone ul[dnd-list] {
margin: 0px;
min-height: 42px;
padding-left: 0px;
}
.dropzone li {
background-color: #fff;
border: 1px solid #ddd;
display: block;
padding: 0px;
}
.dropzone .dndDragging {
opacity: 0.7;
}
.dropzone .dndDraggingSource {
display: none;
}
.dropzone .dndPlaceholder {
background-color: #ddd;
display: block;
min-height: 42px;
}
.dropzone .selected .item {
color: #3c763d;
background-color: #dff0d8;
}
.dropzone .selected .box {
border-color: #d6e9c6;
}
.dropzone .selected .box > h3 {
background-color: #dff0d8;
background-image: linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);
border-color: #d6e9c6;
color: #3c763d;
}
.dropzone .item {
padding: 10px 15px;
}
.dropzone .container-element {
margin: 10px;
}
.dropzone .container-element .column {
float: left;
width: 50%;
}