Drop and Add Item in a mouse positions | angular-dragdrop

Question

Used https://github.com/codef0rmer/angular-dragdrop

I'm looking for a way to add an item to a list in a drop position. How can I do that?

I tried to do that without success

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

can you give more details about `I'm looking for a way to add an item to a list in a drop position`? not clear — Maxim Shoustin, Oct 25 '17 at 08:19
Have a look on the below Plunker which I have created. https://plnkr.co/edit/PzwzyUXa3kTMiUrT7YSK?p=preview Let me know if you're looking for the same behaviour so I will post the same in answer. — Varit J Patel, Oct 25 '17 at 08:28
Yes @varit05 that library is compatible with https://github.com/codef0rmer/angular-dragdrop ? — Silvio Troia, Oct 25 '17 at 11:32
I am using https://github.com/marceljuenemann/angular-drag-and-drop-lists library. Can I put the same in answer? — Varit J Patel, Oct 25 '17 at 12:31

score 1 · Answer 1 · answered Oct 26 '17 at 13:14

Library Used: dnd-draggable directive

Please have a look at the code snippet for the drag and drop list.

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>

Please feel free to ask any questions.

Cheers!

can we do that with different lists? $scope.lists = {"A": [{...}]}; $scope.results = {"B": [{...}]}; — Silvio Troia, Oct 30 '17 at 16:32
Can you please provide me plunger or fiddle what exactly you’re trying to do? — Varit J Patel, Oct 30 '17 at 16:34
Can you please have a look at this? http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested I believe it will help you to achieve what you want to achieve. — Varit J Patel, Oct 30 '17 at 16:49
Yes. The plugin is working with one scope variable. need to club all required to an array if needed. — Varit J Patel, Oct 30 '17 at 16:56

Drop and Add Item in a mouse positions | angular-dragdrop

1 Answers1