Drop and Add Item in a mouse positions | angular-dragdrop
使用 https://github.com/codef0rmer/angular-dragdrop
我正在寻找一种将项目添加到列表中放置位置的方法。
我该怎么做?
我尝试这样做但没有成功
1 2 3 | <div ng-repeat="value in landing.header | unique:src" ng-model="landing.header" data-drop="true" jqyoui-droppable="{index:{{$index}},multiple:true, stack:true}"> |
使用的库:dnd-draggable 指令
请查看拖放列表的代码片段。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | var app = angular.module('plunker', ['dndLists']); app.controller('MainCtrl', function($scope) { $scope.lists = { "A": [], "B": [], "C": [] }; // Generate initial model for (var i = 1; i <= 3; ++i) { $scope.lists.A.push({ label:"Item A" + i }); $scope.lists.B.push({ label:"Item B" + i }); $scope.lists.C.push({ label:"Item C" + i }); } $scope.dropCallback = function(item, type, listName) { console.log(item.label +" was dragged from list" + type +" to list" + listName); return item; // return false to disallow drop }; }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> AngularJS Plunker document.write('<base href="' + document.location + '" />'); <link rel="stylesheet" href="style.css" /> <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/2.1.0/angular-drag-and-drop-lists.js"> </head> <body ng-controller="MainCtrl"> <ul dnd-list="list" dnd-drop="dropCallback(item, type, listName)"> <li ng-repeat="item in list" dnd-draggable="item" dnd-type="listName" dnd-moved="list.splice($index, 1)" dnd-effect-allowed="move"> {{item.label}} </li> </ul> </body> </html> |
请随时提出任何问题。
干杯!