Dropping Element on specific Json entries with Angularjs and Dragula? - angularjs

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