Есть простой пример реализации функционала перетаскивания элементов в списке:
marceljuenemann.github.io/angular-drag-and-drop-li...
Пытаюсь его реализовать (все на одной странице - легко скопировать и посмотреть), но не работает:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Drag and Drop</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.simpleDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0;
}
.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;
}
</style>
</head>
<body>
<div ng-controller="DemoController">
<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>
</div>
<script>
var app = angular.module('app', []);
app.controller('DemoController', function ($scope) {
$scope.models = {
selected: null,
lists: {"A": [
{
"label": "Item A1"
},
{
"label": "Item A2"
},
{
"label": "Item A3"
}
], "B": [
{
"label": "Item B1"
},
{
"label": "Item B2"
},
{
"label": "Item B3"
}
]}
};
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});
}
$scope.$watch('models', function(model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true);
});
</script>
</body>
</html>
Кто-нибудь подскажет в чем ошибка?
