I am working on a project that involves two directives, draggable and droppable. These directives use jQuery UI functions to enable drag-and-drop functionality on elements. In my setup, the draggable items are in a controller that has a parent controller containing a droppable div. I need help figuring out how to remove an item from the child controller's item list and add it to the parent controller's list, as well as removing the item from the draggable list on screen and incrementing the length of the droppable div.
If you'd like to take a look at my code, I have created a jsfiddle for reference:
Here is the structure of the HTML:
<body ng-app="myApp">
<div ng-controller="parentCtrl">
<div id="dropzone" data-index="1" droppable>
{{dropped_items.length}}
</div>
<div ng-controller="childCtrl">
<div ng-repeat="item in items"
data-index="{{$index}}" class="note" draggable>
{{item.title}}
</div>
</div>
</div>
</body>
And here is the JavaScript code:
var app = angular.module('myApp', []);
app.controller('parentCtrl', function ($scope){
var dropped = [
{id:1, title:'Note 1'},
{id:2, title:'Note 2'},
{id:3, title:'Note 3'}
];
$scope.dropped_items = dropped;
});
app.controller('childCtrl', function ($scope){
var data = [
{id:4, title:'Note 4'},
{id:5, title:'Note 5'},
{id:6, title:'Note 6'},
{id:7, title:'Note 7'},
{id:8, title:'Note 8'}
];
$scope.items = data;
});
app.directive('draggable', function() {
return {
restrict:'A',
link: function(scope, element, attrs) {
element.draggable({
revert:true
});
}
};
});
app.directive('droppable', function($compile) {
return {
restrict: 'A',
link: function(scope,element,attrs){
element.droppable({
drop:function(event,ui) {
var dragIndex = angular.element(ui.draggable).data('index');
var dropIndex = angular.element(this).data('index');
console.log(dragIndex);
console.log(dropIndex);
console.log(scope);
scope.$apply();
}
});
}
};
});