Question

已使用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}">

Answer 1

使用的图书馆：dnd-draggable directive

请查看拖放列表的代码段。

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>

请随时提出任何问题。

干杯！

在鼠标位置放下和添加项目|角的DragDrop

1 个答案: