关于 angularjs:在鼠标位置放置和添加项目 |angular拖放

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>

请随时提出任何问题。

干杯!