Dropping Element on specific Json entries with Angularjs and Dragula?

Question

I am learning Angularjs and Dragular.

I have a data set, and on drop I have to insert the data into another container's data set value. For example:

This is the data set

$scope.items1 = [
        {
            'name' : 'x',
            'age' : '4'
        },
        {
            'name' : 'y',
            'age' : '5'
        },
       {
            'name' : 'z',
            'age' : '6'
        }
     ];

And I want to drop each element of items1 into items2 values. items2 looks like:

$scope.items2 = [

        {
            'key' : 'aaa',
            'value' :""
        },
        {
            'key' : 'bbb',
            'value' : ""
        },
        {
            'key' : 'ccc',
            'value' : ""
        },
        {
            'key' : 'ddd',
            'value' : ""
        }

     ];

Once it's dropped, items2 should look like:

{
  name:'aaa',
  value: [{
            'key' : 'aaa',
            'value' :""
        }]
}

for each one. How do I do this?

Answer 1

Here is on of possible solutions:

angular.module('myApp', ['dragularModule']).controller('MyCtrl', function(dragularService, $element, $scope, $timeout) {
  $scope.items1 = [{
    name: 'x',
    age: '4'
  }, {
    name: 'y',
    age: '5'
  }, {
    name: 'z',
    age: '6'
  }];
  $scope.items2 = [

    {
      'key': 'info',
      'value': []
    }, {
      'key': 'info',
      'value': []
    }, {
      'key': 'info',
      'value': []
    },

  ];

  // timeout due to document not ready, jsfiddle settings issue?
  $timeout(function() {

    dragularService('#items1');
    dragularService('.items2');

  });

});

div {
  border: 1px solid blue;
  min-width: 200px;
  padding: 10px
}

.can-be-empty {
  min-height: 10px;
  min-width: 200px;
}

<link href="https://rawgit.com/luckylooke/dragular/master/dist/dragular.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/luckylooke/dragular/master/dist/dragular.js"></script>
<div class='app' ng-app="myApp" ng-controller="MyCtrl">
  <h2>items1</h2>
  <div id="items1" class="can-be-empty">
    <div ng-repeat="item in items1">item {{item.name + ' age:' + item.age}}</div>
  </div>
  <h2>items2</h2>
  <div ng-repeat="container in items2" class="items2">
    <div class="can-be-empty" ng-repeat="item in container.value">
      <div>item {{item.name + ' age:' + item.age}}</div>
    </div>
  </div>
</div>

Link to codepen: https://codepen.io/luckylooke/pen/LyoWzR