Angular 中的新功能，链接来自我尝试创建的位置。控制台没有错误，也没有显示结果。我的要求略有不同，但这需要成为骨干但无法完成。我想要两个表之间的拖放功能，而且它不应该是可排序的。如果从任何表中拖动项目，则应将其拖放到另一个表中，并且不应允许排序。并且多选也应该是可能的，如下面的链接所示。不知道我做错了什么
https://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/multi
html
var app = angular.module('demo',['dndLists']);
app.controller("MultiDemoController", function($scope) {
$scope.list = [
{
"listName": "A",
"items": [
{
"label": "Item A1"
},
{
"label": "Item A2"
},
{
"label": "Item A3"
},
{
"label": "Item A4"
}
],
"dragging": false
},
{
"listName": "B",
"items": [
{
"label": "Item B1"
},
{
"label": "Item B2"
},
{
"label": "Item B3"
},
{
"label": "Item B4"
}
],
"dragging": false
}
];
$scope.models = [
{listName: "A", items: [], dragging: false},
{listName: "B", items: [], dragging: false}
];
/**
* dnd-dragging determines what data gets serialized and send to the receiver
* of the drop. While we usually just send a single object, we send the array
* of all selected items here.
*/
$scope.getSelectedItemsIncluding = function(list, item) {
item.selected = true;
return list.items.filter(function(item) { return item.selected; });
};
/**
* We set the list into dragging state, meaning the items that are being
* dragged are hidden. We also use the HTML5 API directly to set a custom
* image, since otherwise only the one item that the user actually dragged
* would be shown as drag image.
*/
$scope.onDragstart = function(list, event) {
list.dragging = true;
if (event.dataTransfer.setDragImage) {
var img = new Image();
img.src = 'framework/vendor/ic_content_copy_black_24dp_2x.png';
event.dataTransfer.setDragImage(img, 0, 0);
}
};
/**
* In the dnd-drop callback, we now have to handle the data array that we
* sent above. We handle the insertion into the list ourselves. By returning
* true, the dnd-list directive won't do the insertion itself.
*/
$scope.onDrop = function(list, items, index) {
angular.forEach(items, function(item) { item.selected = false; });
list.items = list.items.slice(0, index)
.concat(items)
.concat(list.items.slice(index));
return true;
}
/**
* Last but not least, we have to remove the previously dragged items in the
* dnd-moved callback.
*/
$scope.onMoved = function(list) {
list.items = list.items.filter(function(item) { return !item.selected; });
};
// Generate the initial model
angular.forEach($scope.models, function(list) {
for (var i = 1; i <= 4; ++i) {
list.items.push({label: "Item " + list.listName + i});
}
});
// Model to JSON for demo purpose
$scope.$watch('models', function(model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true);
});/**
* The dnd-list should always have a min-height,
* otherwise you can't drop into it once it's empty
*/
.multiDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
/**
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
*/
.multiDemo ul[dnd-list] .dndPlaceholder {
background-color: #ddd;
display: block;
min-height: 42px;
}
.multiDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
margin-bottom: -1px;
padding: 10px 15px;
}
/**
* Show selected elements in green
*/
.multiDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Drag & Drop Lists for angular.js</title>
<!-- jQuery is not required -->
<!-- <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> -->
<!-- angular is the only dependency! -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/2.1.0/angular-drag-and-drop-lists.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="demo">
<div ng-controller = 'MultiDemoController'>
<!-- your widget template -->
<ul dnd-list='' dnd-drop="onDrop(list, item, index)">
<li ng-repeat="item in list.items"
dnd-draggable="getSelectedItemsIncluding(list, item)"
dnd-dragstart="onDragstart(list, event)"
dnd-moved="onMoved(list)"
dnd-dragend="list.dragging = false"
dnd-selected="item.selected = !item.selected"
ng-class="{'selected': item.selected}"
ng-hide="item.selected">
{{item.label}}
</li>
</ul>
</div>
</body>
</html>