![item]( "item")
* / .simpleDemo ul [dnd-list] li.selected { background-color：＃dff0d8; 颜色：＃3c763d; }< / style> < / head> < body ng-app =demo > <!DOCTYPE html><html data-ng-app="dd"><head> <title>Drag & Drop with AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script>var myapp = angular.module("demo").controller("SimpleDemoController", function($scope) { $scope.models = { selected: null, lists: {"A": [{"label": "Item A2"}], "B": [{ "label": "Item B1" }, { "label": "Item B2" }, { "label": "Item A1" }, { "label": "Item A3" }, { "label": "Item B3" }]} };$scope.model=models; // 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);});</script> <style lang="css"> .simpleDemo ul[dnd-list],.simpleDemo ul[dnd-list] > li {position: relative;}/** * The dnd-list should always have a min-height, * otherwise you can't drop to it once it's empty */.simpleDemo ul[dnd-list] { min-height: 42px; padding-left: 0px;}/** * The dndDraggingSource class will be applied to * the source element of a drag operation. It makes * sense to hide it to give the user the feeling * that he's actually moving it. */.simpleDemo ul[dnd-list] .dndDraggingSource { display: none;}/** * An element with .dndPlaceholder class will be * added to the dnd-list while the user is dragging * over it. */.simpleDemo ul[dnd-list] .dndPlaceholder { display: block; background-color: #ddd; min-height: 42px;}/** * The dnd-lists's child elements currently MUST have * position: relative. Otherwise we can not determine * whether the mouse pointer is in the upper or lower * half of the element we are dragging over. In other * browsers we can use event.offsetY for this. */.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;}/** * Show selected elements in green */.simpleDemo ul[dnd-list] li.selected { background-color: #dff0d8; color: #3c763d;}</style></head><body ng-app="demo"> <！ - dnd-draggable指令使元素可拖动并将 传输分配给它的对象。如果一个元素被拖走，你必须将它从原始列表中删除 你自己使用dnd-moved属性 - > 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}} < / body>< / html> 我尝试过： 我正在尝试在angularjs中实现拖放文本，但是我得到了错误。 </body></html>What I have tried:I am trying to implement drag and drop text in angularjs but I am getting above given error.推荐答案 scope）{ scope) { scope.models = { selected：null， 列出：{A：[{label：Item A2}]，B：[ { label：Item B1 }， { label：Item B2 }， { label：Item A1 }， { label：Item A3 }， { label：Item B3 } ]} }; scope.models = { selected: null, lists: {"A": [{"label": "Item A2"}], "B": [{ "label": "Item B1" }, { "label": "Item B2" }, { "label": "Item A1" }, { "label": "Item A3" }, { "label": "Item B3" }]} }; scope.model =模型; //为（var i = 1;生成初始模型 ;我< = 3; ++ i）{ scope.model=models; // Generate initial model for (var i = 1; i <= 3; ++i) { 这篇关于我得到（script5022：[$ injector：nomod] http://errors.angularjs.org/1.4.8/$injector/nomod?p0=demo）错误请帮帮我，我是角度js的新手。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 10-30 06:21