在鼠标位置拖放和添加项目 |角拖放答案

【问题标题】：Drop and Add Item in a mouse positions | angular-dragdrop在鼠标位置拖放和添加项目 |角拖放
【发布时间】：2017-10-16 11:49:44
【问题描述】：

使用https://github.com/codef0rmer/angular-dragdrop

我正在寻找一种将项目添加到放置位置的列表的方法。我该怎么做？

我尝试这样做没有成功

<div ui-sortable ng-model="landing.header">
    <div ng-repeat="value in landing.header | unique:src"
         ng-model="landing.header" data-drop="true"
         jqyoui-droppable="{index:{{$index}},multiple:true, stack:true}">

【问题讨论】：

你能提供更多关于I'm looking for a way to add an item to a list in a drop position的细节吗？不清楚
看看下面我创建的 Plunker。 plnkr.co/edit/PzwzyUXa3kTMiUrT7YSK?p=preview如果您正在寻找相同的行为，请告诉我，以便我在答案中发布相同的内容。
是 @varit05 该库与 github.com/codef0rmer/angular-dragdrop 兼容？
我正在使用github.com/marceljuenemann/angular-drag-and-drop-lists 库。我可以用同样的方式回答吗？
当然，你可以做到

标签： angularjs angular-dragdrop

【解决方案1】：

使用的库：dnd-draggable directive

请看一下拖放列表的代码sn-p。

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
  };

});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-drag-and-drop-lists/2.1.0/angular-drag-and-drop-lists.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="(listName, list) in lists">
    <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>
  </div>
</body>

</html>

请随时提出任何问题。

干杯！

【讨论】：

我们可以用不同的列表来做到这一点吗？ $scope.lists = {"A": [{...}]}; $scope.results = {"B": [{...}]};
你能给我提供柱塞或小提琴你到底想要做什么吗？
你能看看这个吗？ marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/…我相信它会帮助你达到你想要达到的目标。
那一个都在一个模型 $scope.models 中
是的。该插件正在使用一个范围变量。如果需要，需要将所有需要的东西放到一个数组中。